Cara Membuat Widget Postingan Populer di Blogger - Dengan Gambar Kecil dan Penomoran Otomatis

Cara Membuat Widget Postingan Populer di Blogger - Dengan Gambar Kecil dan Penomoran Otomatis

Cara membuat widget popular posts dengan thumbnail dan penomoran otomatis, ialah topik dari artikel kali ini.

Perlu kalian ketahui, widget postingan populer merupakan salah satu widget yang penting di blog, selain widget search bar, widget recent post, widget kontak, dll.

Tujuan Utama Memasang Widget Postingan Populer di Blog

Tujuan utama dipasangnya widget ini adalah untuk menampilkan beberapa postingan/artikel blog kalian yang banyak dikunjungi oleh visitor.

Memodifikasi widget ini, bisa menjadi daya tarik bagi pengunjung blog kalian. Pastinya, dapat menurunkan rasio pentalan (Bounce rate) blog kalian.

Oleh sebab itu, kali ini Saya akan memodifikasi sedikit widget postingan populer ini, dengan menambahkan fitur penomoran otomatis dan adanya gambar kecil (Thumbnail). Untuk tutorialnya, simak saja pembahasan berikut ini.

Menambahkan Fitur Gambar kecil dan Penomoran Otomatis di Widget Popular Posts Blogger

  • Login ke akun Blogger kalian dahulu.
  • Setelah itu, masuk ke opsi Tata Letak => Tambahkan Gadget => pilih widget Postingan Populer
  • Kemudian, kalian pergi ke opsi Tema => 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:&#39;Oswald&#39;,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 perubahan.

Akhir kata ...

Saya sendiri sudah mencoba tutorial tersebut dan hasilnya baik untuk template blog Saya. Untuk model widget positngan populer lainnya, kalian bisa baca artikel ini.

Saya harap,kalian suka dengan model widget postingan populer tersebut. Jika tidak keberatan, mohon kalian share ke media sosial milik kalian.

Sekian saja pembahasan tentang cara membuat widget postingan populer di blogger (dengan gambar kecil dan penomoran otomatis). Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel