Cara Memasang Widget Popular Post Keren

Cara Memasang Widget Popular Post Keren. Ada banyak cara memasang, membuat, menampilkan, hingga mengganti widget-widget agar sesuai dengan template dengan harapan blog menjadi hidup dan terkesan menarik yang bakal membuat penggunjung tidak bosan untuk kembali lagi dan kali ini saya memposting salah satu widget popular post kesukaan saya sebut saja dengan “Pelangi” yang cenderung warnanya mengikuti alur jalannya hidup. Untuk lebih jelasnya bisa dilihat picture dibawah ini :

Terus bagaimana cara memasangnya? 

1. Masuk ke Blogger >> dasbord >> template >> edit HTML
2. Kemudian cari kode berikut ]]><b/:skin> biar cepat ketemu gunakan Ctrl + F 
3. Copaskan kode dibawah ini tepat diatas ]]></b:skin> 
   
   

   #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
   #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
   #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:10px;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:30px;height:30px;line-height:1em;text-align:center;font-size:28px;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:6px 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;}
   #PopularPosts1 img {
   border-radius:200px;
   width:60px; height:60px;
   margin-left:4px;
   }
   

   
   
4. Langkah selanjutnya simpan template dan lihat hasilnya
5. Untuk selebihnya bisa diedit sendiri berapa postingan yang akan ditampilkan.

Itulah tadi step by step tutorial cara menganti, memasang hingga menampilkan widget popular post Pelangi yang keren. Semoga anda dan pengunjung menikmatinya.

Tweet