Skrip Untuk Membuat Widget Populer Post Berwarna

Jadi ceritanya katro coba mau dandanin sekit blog teknisi katro ini biar agak bercahaya dikit gitu, misal nambahin warna di mananya gitu, nah nemu juga nih trik sedikit tentang nambahin widget populer post yang bisa dikasih warna, jadi judulnya emang awalnya seperti itu, widget populer post sebelah kanan biasanya kan cuma item putih doang, nah setelah kita edit di templatenya kita bisa melihat populer post blog kita akan menjadi ada warnanya.

Catatan si Katro - Seperti sekarang blog katro sudah ada warnanya di populer postnya, seperti yang saya pelajari di blog ini terimakasih sudah berbagi :D sekarang saya coba share lagi di blog katro siapa tahu ada juga yang pengen merombak widget populer post blognya menjadi ada warnanya seperti katro. Walau hasilnya emang gak sempurna seperti dalam ceritanya diblog tersebut.

Disana dijelaskan bakal bisa berputar dan ada buletanya, tapi disini teknisi katro mencoba memang ada namun tidak semua bagus, karena diposisi atas agak kepotong juga tuh entah karena template yang digunakan tidak mendukung skrip widget popler warna tersebut atau entahlah. berikut adalah skrip yang bisa dipraktekan.

Caranya :
1. masuk ke template lalu pilih edit
2. cari atau find </style> atau katanya sih bisa cari kode ini ]]></b:skin> tapi si katro memilih meletakan kode di atas kode </style>.

Skrip Untuk Membuat Widget Populer Post Berwarna

========================================================================
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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:30px;text-align:center;font-size:28px;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{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{-moz-border-radius:130px;-webkit-border-radius:130px;border-radius:130px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;padding:4px;border:1px solid #fff!important}
#PopularPosts1 img:hover{border-radius:0 0 0 0;-moz-transform:scale(1.2) rotate(-711deg);-webkit-transform:scale(1.2) rotate(-711deg);-o-transform:scale(1.2) rotate(-711deg);-ms-transform:scale(1.2) rotate(-711deg);transform:scale(1.2) rotate(-711deg)}

========================================================================

Skrip Untuk Membuat Widget Populer Post Berwarna

Nah begitulah hasilnya Widget Populer Post Berwarna bisa dilihat di gambar hasilnya, memang tidak sempurna, tapi yah lumayan buat nambah aksen di blog katro, namanya juga katro :D