Sunday, March 15, 2015

Cara Membuat Widget Popular Post Rainbow colored

Sunday, March 15, 2015
w1


 sudah banyak para pengguna Blog yang memakai widget ini. dan jika anda ingin memasangnya di  blog silahkan simak Tutorialnya di bawah ini !!






Pertama masuk ke dasbor blog anda kemudian pilih Tata Letak  klik Tambahkan Gadget


w2


Selanjutnya Pilih Entri Populer



w3


Untuk  Judul Widgetnya silahkan anda isi sesuka hati anda, contoh saya memberi nama widget ini dengan Popular Post.

maksud dari  kolom paling banyak di kunjungi ini adalah untuk menampilkan postingan yang paling banyak di lihat atau di kunjungi oleh orang dalam kurun  waktu tertentu, silahkan anda pilih sesuka hati anda. contoh saya memilih 30 hari terakhir.

kolom terakhir yaitu Tampilkan judul dan entri silahkan anda hilangkan tanda centang di kotak thumbnail gambar dan cuplikan.

kemudian klik Simpan

w4



 kembali lagi ke dashbor dan  masuk ke  Template pilih edit HTML 



w5


cari kode  ]]></b:skin> (gunakan control F untuk mempercepat pencarian)
dan copy kan Kode di bawah ini tepat di atasnya


/*Custom Popular Post*/
.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;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}


Terakhir klik Simpan Template anda !!

Itulah Cara Membuat Widget Popular Post Rainbow colored

Terima kasih sudah berkunjung !!