Widget Postingan Populer Hello bro-bro yang ganteng hehe kali ini saya Mboton Dev akan membuat Cara membuat widget popular posts dengan thumbnail bertampilan image broo.

Cara Membuat Widget Postingan Populer

Widget Postingan Populer Pasti anda tahukan postingan popular saya ini ada image thumbnail kan bro hehe. Biar kelihata lebih keren kita bisa pasang dengan bertampilan sesuka hati anda semua broo.

Widget Postingan Populer

Cara Membuat Widget Postingan Populer Anda sangat perlu kalian ketahui, widget postingan populer merupakan salah satu widget yang terpenting di blog maupun blogspot anda bro, selain widget popular ada juga yg lain bro seperti di bawah ini yang saya jelaskan sedikit broo.

Seperti Search Bar
Seperti Widget Recent Post
Seperti Widget Kontak
Seperti Widget Email

Dan lain-lain bro Tujuan utama dipasangnya widget ini adalah untuk menampilkan beberapa postingan/artikel blogger kalian yang banyak dikunjungi oleh visitor atau pengunjung orang lain.

Memodifikasi atau membuat tampilan lebih keren pada widget anda akan lebih menarik kepada orang lain broo, bisa menjadi daya tarik bagi pengunjung blog kalian. Pastinya dapat menurunkan rasio pentalan (Bounce rate) blog kalian semua karena pada lebih lama untuk membaca atau lihat tampilan anda semua.

Oleh dari sebab itu, kali ini Saya akan memodifikasi sedikit demi sedikit pada widget postingan popular.

Cara Membuat Widget Postingan Populer Karena saya suka experiment pada membuat blog atau website saya sendiri dengan menambahkan fitur-fitur yang baru otomatis dan adanya gambar kecil Thumbnail.

Untuk caranya ini , silakan pelajari dengan details iya bro agar bisa bertampilan ada image langsung pembahasan berikut ini di bawah.

Widget Popular Post Blogger

Menambahkan Fitur-Fitur Gambar kecil pada Widget Popular Posts Blogger maupun web anda
Login ke akun Blogger kalian dahulu. kalau udah masuk silakan
Pilih Setelah atau settingan, masuk ke opsi Tata Letak => Tambahkan Gadget => pilih Widget Postingan Populer
Kemudian, kalian bro klik ke opsi Tema atau template=> Edit HTML => pastekan kode CSS dibawah ini sebelum kode. ]]></b:skin> atau </b:skin>

CSS/* 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;}

Simpan lihat pada web anda pasti akan berubah menjadi image.

Akhir kata dari saya Mboton Dev

Cara Membuat Widget Postingan Populer Saya sendiri pastinya sudah mencoba cara ini broo tersebut dan hasilnya baik untuk template blog Saya sendiri.

Untuk widget positngan populer imager broo, kalian bisa baca artikel ini dengan details dan jelas bro.

Saya harap,kalian suka dengan widget postingan populer tersebut broo. Jika tidak keberatan, mohon kalian share ke media sosial milik kalian atau beri tahu kepada orang lain broo.

Cara Membuat Widget Postingan Populer Sekian saja pembahasan tentang cara membuat widget postingan populer Image dengan gambar kecil.

Terimakasih atas kunjungan anda semua kawan-kawanku semoga anda berhasil.

Table Of Contents