Title+otomatis+pada+popular+posts

Popular posts adalah artikel yang sering di baca. Kita dapat memodifikasi popular posts sedemikian rupa.
Tutorial blog pagi ini tentang cara membuat popular posts warna warni. Karena author suka yang colorfull gitu...beu curhat 

1. Login blog
2. Edit html > template > cari kode ]]></b:skin>
3. Letakkan kode css berikut di atas ]]></b:skin>

/* ---- popularpost ----*/
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}#PopularPosts1 ul li:first-child{background:#FFBABA;width:90%}#PopularPosts1 ul li:first-child+li{background:#DC9DED;width:90%}#PopularPosts1 ul li:first-child+li+li{background:#BFEAFF;width:90%}#PopularPosts1 ul li:first-child+li+li+li{background:#BFFFCE;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li{background:#EEFFBF;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li{background:#FFECBF;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#FFCBBF;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li{background:#BFF0FF;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:#BFFFD0;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background:#F7FFBF;width:90%}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child+li:after,#PopularPosts1 ul li:first-child+li+li:after,#PopularPosts1 ul li:first-child+li+li+li:after,#PopularPosts1 ul li:first-child+li+li+li+li:after,#PopularPosts1 ul li:first-child+li+li+li+li+li:after,#PopularPosts1 ul li:first-child+li+li+li+li+li+li:after,#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li:after,#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:20px;line-height:1em;text-align:center;color:#fff}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px}#PopularPosts1 ul li a{color:#333;font-family:'Oswald';text-decoration:none}#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts3 img{-moz-border-radius:130px;-webkit-border-radius:130px;border-radius:130px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:4px;border:1px solid #fff!important;background:#f2f2f2}
/* ---- popularpost ----*/
4. simpan template
5. menuju layout > add gadget dan pilih popular posts,
jika Anda ingin menampilkan hanya judul post saja, hilangkan checklist seperti gambar di bawah.

6. Simpan gadget.

Oh ya...warna dapat di ubah sesuai selera. Demikian tutorial blog tentang cara membuat popular posts warna warni. semoga bermanfaat.sFun_zipit




 
Top