Cara Membuat Popular Post Keren di Blog

*Cara Membuat Popular Post Keren di Blog* – Bagaimana kabarnya sobat blogger? semoga dalam keadaan sehat, kali ini elhasany software akan share tutorial blog yaitu tentang popular post atau memasang popular post yang tentunya keren dan menarik di blog.
Screenshot:

Elhasany Software selain berbagi software full version gratis juga share tutorial blog lengkap buat sobat semua. Nah, seperti yang sudah saya jelaskan diatas saya akan share “Cara Membuat Popular Post Keren di Blog” yaitu dengan modifikasi kode script dan menghasilkan popular post yang menarik dan keren buat blog sobat.

Cara Membuat Popular Post Keren di Blog

Tips dan trik untuk membuat popular post keren di blogspot kali ini cukup mudah, sobat blogger dijamin bisa untuk memasangnya. yuk,, simak tutorial cara memasang widget popular post keren dibawah ini:

1. Silahkan Sobat Login ke akun Blogger.
2. Langsung Pilih Template >> Klik Edit HTML.
3. Sobat Cari kode ]]></b:skin> (gunakan CTRL+F).
4. Lalu letakkan kode berikut ini tepat diatas ]]></b:skin>

#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width: 220px;
margin-left: 25px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:220px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: capitalize;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

5. Save dan lihat hasilnya.

Keterangan :
width: 220px; adalah lebar widget popular post, silahkan sesuaikan dengan lebar sidebar sobat.

Catatan Penting !!!
1. Pastikan widget Popular Post sudah terpasang di blog sobat.
2. Jika widget popular post sudah terpasang jangan lupa lakukan setting seperti gambar dibawwah ini:

3. Jika sudah selesai, silahkan save dan nikmati hasilnya.

Sekian tutorial blog kali ini, semoga Cara Membuat Popular Post Keren di Blog dapat bermanfaat dan menambah kesan menarik di blog sobat karena ini termaasuk trik seo on page. selamat mencoba Good Luck.

Leave a Reply