Mempercantik blog dengan Popular Post

Mempercantik tampilan blog merupakan salah satu yang wajib dilakukan oleh para blogger, Kenapa? Karena dengan mempercantik display dari blog yang kita punya secara tidak lansung mampu memberikan daya tarik tersendiri bagi pengunjung blog Kita. Olehnya itu, Jika Anda menginginkan para pengunjung blog Anda betah dan menyukai blog Anda, Anda harus mempercantik tampilan blog Anda. Adapun salah satu jalan untuk mempercantik tampilan blog yaitu dengan memodifikasi model tampilan popular post blog Anda.

Berikut ini langkah-langkah memodifikasi tampilan Popular Post Blog menjadi lebih menarik:

Terlebih dahulu, Anda harus masuk ke halaman desain blog Anda

Kemudian masuk ke menu "Template"

Pada sub menu template itu, pilih "Edit Html"

Setelah halaman edit Html aktif, Silahkan Anda cari kode "]]></b:skin"

Kemudian tepat di atas "]]></b:skin" tadi, letakkan kode yang ditampilkan pada kotak di bawah ini:

<!-- entry populer by rumahdauzy.blogspot.com -->
#PopularPosts1 ul li:first-child{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child:after{content:""}
#PopularPosts1 ul li:first-child + li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#f69e5d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:""}
#PopularPosts1 ul li:first-child:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
#PopularPosts1 ul li:first-child + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}
#PopularPosts1 ul li:first-child + li + li:hover{background: #d26c21;
-moz-transform: scale(1.1) ;
-webkit-transform: scale(1.1) ;
-o-transform: scale(1.1) rotate ;
-ms-transform: scale(1.1) rotate ;
transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:hover{background: #d26c21;

-moz-transform: scale(1.1) ;

-webkit-transform: scale(1.1) ;

-o-transform: scale(1.1) rotate ;

-ms-transform: scale(1.1) rotate ;

transform: scale(1.1) ;}

#PopularPosts1 ul li a{color: #ffffff;}

#PopularPosts1 ul li a:hover{color: #a61515;}

}

Simpan perubahan Html blog Anda tersebut dengan mengklik tombol "Simpan"

Periksalah perubahannya. Demikian tips dari Saya, silahkan modifikasi Popular Post ini pada blog Anda guna meningkatkan tampilan pada blog Anda.

---

Silahkan baca juga artikel sejenisnya di bawah ini :

BLOGING