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 ingin tau pembaca blog kita untuk melihat postingan tersebut dan balasannya pageview blog kita menjadi bertambah. Untuk lebih detailnya, silahkan teman lihat tampilan di bawah ini beserta cara memasangnya pada template blognya.
Menambah Widget Popular Post Minimalis
Ada dua tampilan popular post minimalis yang ingin aku bagikan kepada teman , semoga sanggup menarik minat teman untuk memasangnya pada template blog yang teman miliki. Untuk langkah-langkahnya silahkan simak di bawah ini.
- Masuk ke hidangan Tata Letak kemudian Klik "Tambahkan Gadget"
- Pada pilihannya pilih opsi "Entri Populer atau PopularPost"
- Lalu Edit atau setting sesuai dengan gambar berikut,
- Simpan gadget kalau sudah selesai.
Kustomisasi Widget Popular Post Minimalis
Setelah teman menyimpan gadget tersebut, secara otomatis akan muncul widget popular post pada template blog teman 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 hidangan Template + Edit Html.
3. Cari aba-aba berikut :
]]> </ b: skin>
4. Lalu salin aba-aba di bawah ini sempurna 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 menyerupai ini :
Atau kalau ingin dengan tampilan menyerupai ini :
Silahkan salin aba-aba 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 teman atau lihat aba-aba warnanya disini.
- Kode rgb(241, 241, 241) atau #fff Menunjukkan warna angka pada kotak, silahkan ubah sesuai impian atau biarkan saja secara default.
- Untuk kostumisasi lebih lanjut, silahkan setting sesuai impian sobat atau biarkan secara default.
Last Word
Cukup gampang bukan? Semoga dengan tampilan popular post teman yang gres sekarang, bisa mendongkrak pageview blog teman semua. Silahkan baca postingan menarik lainnya disini.
Sekian tutorial kali ini yang sanggup aku sharing perihal Widget Popular Post Minimalis Untuk Blogger. Bila teman mengalami kebuntuan atau duduk masalah dalam pemasangan widget ini, silahkan beri komentar teman di bawah ini, sebisa mungkin aku akan memberkan solusinya. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Happy blogging.
