Cara Membuat Widget Postingan Populer Image blog

Hello bro-bro yang ganteng hehe kali ini saya Mboton Dev akan membuat Cara membuat widget popular posts dengan thumbnail bertampilan image broo. 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.

https://www.mboton.net/2019/03/cara-membuat-widget-postingan-populer.html
Cara Membuat Widget Postingan Populer Image blog

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. 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 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

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. Sekian saja pembahasan tentang cara membuat widget postingan populer Image dengan gambar kecil. Terimakasih atas kunjungan anda semua kawan-kawanku semoga anda berhasil.
Cara Membuat Widget Postingan Populer Image blog Cara Membuat Widget Postingan Populer Image blog Reviewed by Mboton on 3/11/2019 Rating: 5

1 comment:

Powered by Blogger.