Widget Popular Post Minimalis Untuk Blogger

Widgets

Pada Postingan kali ini, saya ingin berbagi widget popular post yang minimalis buat blog sobat semua. Widget popular post itu sendiri bagi saya memang cukup essensial untuk ditampilkan dalam blog guna menarik perhatian para pembaca blog kita dan bagi pemilik blog, widget ini tentu akan sangat membantu dalam membuat tampilan blog menjadi lebih menarik serta dalam menyiasati kekosongan pada bagian sidebar yang terdapat dalam template blog kita. 

Dengan widget popular post ini, para pembaca blog kita akan lebih cepat mengetahui postingan apa saja yang paling menarik bagi pembaca yang lain yang ada di dalam blog kita, sehingga akan lebih menarik rasa penasaran pembaca blog kita untuk melihat postingan tersebut dan alhasil pageview blog kita menjadi bertambah. Untuk lebih detailnya, silahkan sobat lihat tampilan di bawah ini beserta cara memasangnya pada template blognya.

Menambah Widget Popular Post Minimalis

Ada dua tampilan popular post minimalis yang ingin saya bagikan kepada sobat , semoga dapat menarik minat sobat untuk memasangnya pada template blog yang sobat miliki. Untuk langkah-langkahnya silahkan simak di bawah ini.

• Masuk ke menu Tata Letak lalu Klik "Tambahkan Gadget"
• Pada pilihannya pilih opsi "Entri Populer atau PopularPost"
• Lalu Edit atau setting sesuai dengan gambar berikut,

• Simpan gadget jika sudah selesai.

Kustomisasi Widget Popular Post Minimalis

Setelah sobat menyimpan gadget tersebut, secara otomatis akan muncul widget popular post pada template blog sobat dengan tampilan standar sesuai widget default-nya blogger. Untuk mengkostumisasi tampilan default dari widget popular post tersebut, silahkan simak langkahnya berikut ini.

1. Untuk antisipasi template error, back up terlebih dahulu template sobat.
2. Tuju ke menu Template + Edit Html.
3. Cari kode berikut :

]]> </ b: skin>

4. Lalu salin kode di bawah ini tepat di atasnya.

/*--- vinspirations Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.2em 0.5em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: rgb(241, 241, 241);
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid rgb(243, 243, 243);
box-shadow: 1px 2px 9px #666; }

.popular-posts ul li {
border-bottom: 1px dashed #ddd;
height:28px;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed rgb(105, 105, 105);
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Tampilannya akan tampak seperti ini :

Atau jika ingin dengan tampilan seperti ini :

Silahkan salin kode berikut,

/*--- vinspirations Popular Posts --- */
.popular-posts ul{
padding-left:0px;
counter-reset:popcount
}
.popular-posts ul li:before{
list-style-type:none;
margin-right:15px;
padding:0.2em 0.5em;
counter-increment:popcount;
content:counter(popcount);
font-size:16px;
background:#292D30;
color:#fff;
position:relative;
font-family:georgia;
float:left;
border:2px solid #ddd;
border-radius:15px
}
.popular-posts ul li{
border-bottom:1px dashed #ddd;
height:28px
}
.popular-posts ul li:hover{
padding-left:10px;
border:2px solid #6BB5FF;
background:#FFF
}
.popular-posts ul li a{
text-decoration:none;
color:#5A5F63
}
.popular-posts ul li a:hover{
text-decoration:none;
text-decoration:none;
color:#78B6F4
}
.popular-posts .item-thumbnail img{
webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
list-style:none
}
.popular-posts .item-thumbnail img:hover{
webkit-border-radius:0px;
list-style:none;
-moz-border-radius:0px
}

Keterangan :

• Untuk mengubah default background pada kotak nomor, silahkan ubah #292D30 sesuai warna sobat atau lihat kode warnanya disini.
• Kode rgb(241, 241, 241) atau #fff Menunjukkan warna angka pada kotak, silahkan ubah sesuai keinginan atau biarkan saja secara default.
• Untuk kostumisasi lebih lanjut, silahkan setting sesuai keinginan sobat atau biarkan secara default.

 5. Pratinjau terlebih dahulu lalu simpan template sobat - Selesai!

Last Word

Cukup mudah bukan? Semoga dengan tampilan popular post sobat yang baru sekarang, mampu mendongkrak pageview blog sobat semua. Silahkan baca postingan menarik lainnya disini.

Sekian tutorial kali ini yang dapat saya sharing tentang Widget Popular Post Minimalis Untuk Blogger. Bila sobat mengalami kebuntuan atau masalah dalam pemasangan widget ini, silahkan beri komentar sobat di bawah ini, sebisa mungkin saya akan memberkan solusinya. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Happy blogging.