Taukah anda bahwa postingan populer atau popular post pada widget di blog anda bisa dipercantik dan menjadi lebih responsif.
Ada banyak cara yang bisa anda lakukan untuk mempercantik postingan populer pada widget blog, namun tidak semua tutorial yang tersedia bisa bekerja dan cocok dengan template blog anda.
Pada kesempatan kali ini anda bisa melihat dan mencoba menerapkan dua cara mempercantik postingan populer pada blog dengan cukup mudah dan di jamin akan cocok dengan template blog.
Cara Mempercantik Postingan Populer 1
Copy kode dibawah ini lalu paste di atas kode </style> lalu klik simpan.
Copy kode dibawah ini lalu paste di atas kode </style> lalu klik simpan.
/*--- Genera Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGXe9ZWxWCZRtdO830qaDBXTViU96myOCt6Lmsw5BE4UuE-LKZd3u1RsM02QS9EZL3k4vZfPMb16jjljnRRtCv-6KmgDdTt0gb6w0UB4UaMj1mU56Um8sKrKdvtgcXYyi6qJw0b5Ond5R/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Jika ingin hanya menampilkan nomer maka anda bisa menonaktifkan bagian gambar/thumbail pada settingan widget popular post.
Cara Mempercantik Postingan Populer 2
Copy kode dibawah ini lalu paste diatas kode </style> lalu klik simpan.
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #359bed;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}Anda tinggal mengatur apakah ingin menampilkan thumbail atau hanya menampilkan nomor beserta judul saja.
Postingan populer bisa kalian maksimalkan untuk peningkatan SEO on page yang nantinya akan memperbanyak jumlah pengunjung blog, popular post juga berfungsi untuk memperlihatkan artikel atau konten yang paling banyak di baca oleh pengunjung kepada pengunjung yang membuka blog anda.
