Widget Popular Post Dengan Thumbnail dan Auto Numbering

Popular Post Widget With Thumbnail and Auto Numbering -  Yuhu ini adalah postingan ke 4 di hari yang sama, demen banget posting hehehe. Blog nya lagi ada pembersihan karna sebelum nya banyak posting yang melenceng dari niche nya, dari 60 lebih postingan sekarang tingal 20an wkwk. Ga usah bahas gituan dah, kita langsung ke topik aja bair enak. Kali ini saya bakal kasih tutorial pembuatan widget lagi, yaitu widget popular post dengan thumbnail dan auto numbering yang tentunya keliatan keren karena menggunakan css dan dengan ini kalian bisa mengedit nya sendiri di bagian css.

Dengan kode CSS tersebut, ketika pengunjung blog mengarahlan kursor nya ke widget popular post ini, maka deskripsi dari posting yang teratas akan keluar. Dengan begini, tidak akan memakan banyak ruang di side bar blog. cara nya ga susah susah amat, kita tinggal memasukan kode CSS yang nantinya akan digunakan untuk merubah tampilan dari widget popular post nya. Langsung ke TKP aja lah :

Langkah Pertama : Seperti biasa, login dulu ke blogger dan masuk ke dashboard, kemudian masuk ke Tata Letak > Add a Widget > Popular Post

Langkah Kedua : Masuk ke Template > Edit HTML copy kode CSS dibawah ini dan paste di atas </style>

/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

Terakhir tinggal di save template nya, abis itu coba kalian refreesh halaman blog nya, taraaa berubah kan hehehe.