Cara Modifikasi Widget Popular Post Warna Warni

Cara Modifikasi Widget Popular Post Warna Warni - Assalamualikum wr.wb hai sobat pada postingan kali ini saya akan membahas tentang Cara Modifikasi Widget Popular Post Warna Warni , Memasang widget popular post itu sangat penting bagi kita, agar pengunjung di blog kita itu tau mana yang paling banyak dibaca artikel di blog tersebut .

nah dan kali ini saya akan memodifikasinya menjadi warna warni seperti yang terlihat diatas, memang memodifikasi popular post itu bertujuan untuk menambah keharmonisan dan menambah keindahan dalam suatu blogger, dan juga cara tersebut dapat dilakukan dengan anda semua .

Widget popular post merupakan widget yang salah satunya penting bagi blog, karena widget ini bertujuan untuk Mengetahui Postingan manakah yang paling banyak dibaca, atau artikel yang paling banyak dikunjungi, dan oleh karena itu dengan kalian yang ingin mencoba tutorialnya monggo silahkan .

dan dengan memodifikasi popular post warna warni pengunjung akan fresh dan juga betah dalam blog tersebut, nah jika kalian ingin membaca tutorial memodifikasi popular post warna warni silahkan kalian baca pada berikut ini .

Cara Modifikasi Widget Popular Post Warna Warni

• Buka Blogger Anda > lalu pergi ke dashboard 
• Di samping kiri anda pada menu kalian klik "template" dan kemudian klik "Edit HTML"
• Setelah itu masukkan kode dibawah ini diatas kode "]></b:skin>" dan jika template blog agan sudah dibuat menjadi Template valid CSS3 masukkan kode dibawah ini diatas kode "</style>"

.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 &quot;Arial Narrow&quot;,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 and level */

.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

• Nah Jika Kalian Sudah Mengopy kode diatas Klik Dibagian atas yaitu "Simpan Template"
• Dan Pastikan Kalian sudah membuat widget popular post diblogger kalian, jika tidak buat ya mana bisa ??.

Nah Itulah Cara Modifikasi Widget Popular Post Warna Warni dan semoga kalian dan para sobat blogger bisa mencobanya dengan tutorial diatas,, demikianlah artikel tentang Cara Modifikasi Widget Popular Post Warna Warni semoga bermanfaat bagi kita semua wassalamualikum wr.wb.