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.
Tapi sebelum itu, klik banner di bawah ini guna membantu dalam pengembangan blog ini, atas Klik-annya, diucapkan terima kasih.
Berikut ini langkah-langkah memodifikasi tampilan Popular Post Blog menjadi lebih menarik :
- Login ke Blogger anda terlebih dahulu.
- Masuk ke menu "Template"
- Pada sub menu template itu, pilih "Edit Html"
- Setelah halaman edit Html aktif, Silahkan cari kode ]]></b:skin>
- Kemudian sisipkan kode yang ditampilkan pada kotak di bawah tepat di atas ]]></b:skin>, lalu simpan settingan dengan menekan tombol "Simpan Template"
#PopularPosts1 ul{margin:-100px;padding:500px 0;list-style-type:none}
#PopularPosts1 ul li{position:left;margin:3px -15px;border-radius:0px 15px 0px 15px;border:2px solid #d26c21;-webkit-box-shadow:0px 0px 0px #000;-moz-box-shadow: 0px 0px 0px #000;padding:10px;}
#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;}
}
Demikian tips dari Saya, silahkan coba percantik tampilan Populer Post blog Anda
