Cara Membuat Popular Post Warna Warni


Cara Membuat Popular Post Warna Warni - Hai sobat, apakabar dengan anda? tentunya sangat sehat dan bugar bukan? nah bagi blogger tentunya blognya ingin di percantik sehingga menarik perhatian pengunjung bukan? apalagi widget yang paling penting yang harus di terapkan di blog yaitu Popular Post. Dengan adanya popular post yang di design dengan warna warni sehingga sangat menggoda pengunjung untuk tetap bertahan di blog anda.
Cara Membuat Popular Post Warna Warni

Popular Post adalah sebuah widget yang menampilkan post atau artikel yang paling banyak di kunjungi oleh pengunjung blog. Popular post dapat kita tampilkan dengan adanya thumbnail atau hanya kata-kata saja atau yang dapat di sebut sebagai cuplikan dan atau juga hanya dapat kita tampilkan hanya judul saja seperti yang ada di blog ini.

Gampang tidak sih membuat popular post ini? sangat amat gampang brow haha anda cuma memasukkan cssnya kedalam Template anda atau HTML yang terdapat di blog anda.

Mari ikuti Cara dibawah ini :
  • Pertama masuk lah ke HTML > Edit HTML
  • Sebelumnya anda harus memasang widget popular post terlebih dahulu
  • Sesudah itu carilah code ]]></b:skin>
  • Lalu Copy code dibawah ini dan pastekan tepat di atas code ]]></b:skin>
  • #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
    #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:20px;height:20px;line-height:1em;text-align:center;font-size:20px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
    #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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:10px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;height:35px;}
    #PopularPosts1 ul li a {margin-left:10px;font-size:15px;color:#000}
  • Lalu Simpan dan lihat hasilnya

Gampang kan? haha itulah cara membuat popular post warna warni