Cara Membuat Widget Populer Post Menjadi Berwarna Warni

Ditulis Oleh Rifki Andrean Pada Hari Senin, 12 Agustus 2013

Banyak sekali blogger berminat membuat dan mempercantik bloggernya sendiri. Kini hadir mempercantik popular post dengan efek berwarna warni.

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:


/* Custom CSS for Blogger Popular Post Widget */ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; } .PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight:bold; font-size:120%; color:inherit; text-decoration:none; } .PopularPosts ul li:before { content:counter(num); display:block; position:absolute; background-color:black; color:white; width:30px; height:30px; line-height:30px; text-align:center; top:50%; right:-10px; margin-top:-15px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; } /* Set color & level */ .PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%} .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%} .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%} .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%} .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%} .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
Klik Simpan Template. Begitu saja.

Ditulis Oleh : Rifki Andrean Admin dari www.mamangtutorial.blogspot.com

Rifki Andrean Assalamualaikum WR, WB.
Anda sedang membaca artikel berjudul Cara Membuat Widget Populer Post Menjadi Berwarna Warni yang ditulis oleh Rifki Andrean yang berisi tentang "Cara Membuat Widget Populer Post Menjadi Berwarna Warni" Apabila anda sedang membaca, Anda tidak diperbolehkan mengcopy paste artikel ini. Hak cipta dilindungi oleh monitoring artikel.

Blog, Updated at: Senin, Agustus 12, 2013

0 komentar:

Posting Komentar

Mari Bantu Artikel Ini, Join Sekarang !

Pencarian


mamangtutorial.blogspot.com© 2014. All Rights Reserved.
SEOCIPS Areasatu