Popular Post Keren

Menampilkan popular post di dalam blog memang bikin menarik untuk pengunjung, akan tapi lebih menerak lagi apabila ditambah dengan efek animasi bila di sorot dengan kursor.

Popular post yang saya buat ini berdasarkan jumlah viewernya atau jumlah pembaca. Jadi tidak berdasarkan jumlah komentar.

Untuk cara menambahkan ke dalam blog anda cukup sederhana, tinggal sobat copy paste script yang saya akan berikan.

Caranya :

• Masuk Template - Edit HTML
• lalu copy dan paste script di bawah ini tepat di atas ]]></b:skin>

#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:0px 0px 1px;
left:0px;
width: 250px;
margin-left: 15px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 5px 0;
padding: 3px 2px 0 15px;
left:5px;
width:250px;
}
#PopularPosts1 ul li{
background: #;
position: relative;
display: block;
padding: .2em .2em .2em 2em;
*padding: .2em;
margin: .5em 0;
background: #;
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: #bb3b3b; /* background color of numbers */
border: .2em solid #ffffff; /* border color */
-webkit-box-shadow: 0 9px 6px -7px #888;
-moz-box-shadow: 0 9px 6px -7px #888;
box-shadow: 0 9px 6px -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;
}

• Lalu simpan templatenya....:14:
• Kemudian masuk Layout - dan pilih add a gadget sesuai lokasi popular post yang ingin sobat letakkan
• Lalu pilih tambahkan gadget Popular post
• Simpan dan lihat hasilnya :21::21:

Terimakasih telah mengunjung blog ini... :38:
Silahkan pembaca yang baik tinggalkan jejak anda di komentar...hehe :c::c::c: