Cara membuat widget popular post keren seperti viomagz di blog
Fagas official~Berbicara tentang widget yang terdapat pada Blogger Pasti tidak asing lagi dengan salah satu widget yang bernama Popular post,walaupun hampir sama seperti widget lainya tetapi keberadaan dan
ke menarikan Popular post Tidak bisa di sepelekan, selain berfungsi untuk menunjukkan beberapa artikel popular kamu widget Popular post Yang menarik juga akan membuat daya tarik tersendiri
bagi pengunjung blog kamu,dan membuat pengunjung betah berlama lama dalam mengunjungi blog kamu dan pastinya akan sangat bermanfaat untuk peringkat blog.ada banyak sekali jenis jenis keren widget
Popular post Yang sering kita jumpai salah satunya yaitu yang menggunakan thumbnail(gambar),yang warna warni dan ada juga yang menambah angka dan icon tambahkan pada Popular post Mereka
Cara membuat widget popular post keren seperti viomagz di blog
Terlebih dahulu masuk dulu ke blogger kamu terlebih dahulu
Pilih Tema Lalu Edit html
Masukan kode Dibawah ini Tepat Diatas kode ]]></b:skin> Atau </style>
/* Popular Posts */ .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 10px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: #444444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
content: counter(num) !important;
font-size: 30px;
font-weight: 500;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(#49ACE1, #fff);
color: #fff !important;
width: 26px;
padding-top: 10px;
text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
margin-left: 30px;
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
}
Terakhir simpan dan lihat hasilnya
Pastikan juga kamu sudah menghapus widget Popular post bawaan tempkate kamu,dengan cara cari kode /* Popular Posts */ hapus semua nya yang berkaitan dengan /* Popular Posts */
Akhir kata
Seperti itu yang bisa saya berikan pada tutorial kali ini,jika kamu merasa bahwa artikel kali ini bermanfaat jangan lupa untuk share dan untuk yang belum paham bisa di tanyakan melalui komentar.
0 Response to "Cara membuat widget popular post keren seperti viomagz di blog"
Post a Comment