membuat tampilan popular posts keren

Cara untuk membuat tampilan popular posts ini tidak terlalu sulit, hanya memerlukan kode html kedalam template sobat. Popular posts biasanya diletakan dibagian samping kanan atau kiri blog., tergantung selera masing-masing pemilik blog.

1. Pertama Login ke akun blog
2. Pilih Template kemudian Edit HTML
3. Cari kode ]]></b:skin> kemudian Copy kode dibawah ini lalu paste di atas kode ]]></b:skin>

<style>
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79WvgorKetX3Hzrx-2GmPMmHIR8f2VArLrRihehAbhN92SQHgiqFCHt1r7mpSfdiW6mJJGWi9zsK_OtrbsaOIZs5leCyw9VpTQNV_2G7AbfuLvlmf9W1HCiOEuW9_e6oWPfya5JM3Xvs/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg93PFkyGH55SKYj4L9OQdL0gGl5g6Rp9ahOXCwvu9jZJoPJABsniwUmLKoTX-q-3kdkWYuQ9n1aJCsOXcKiJKFF3m8NE11KHeYSDSwSQ0gH0vTipTWU7AY8AznPxvuvqwByWdyqj0fKqU/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
</style>

4. Terakhir Simpan/Save
Selamat mencoba, dan terimakasih atas kunjungannya.