Widget Popular Post Dengan Nomor - Multi Colored Warna Warni

Halo Bloggers!

Kali ini admin akan berbagi ilmu lagi yang di dapat dari web tetangga yang sangat jauh..hhe. Intermezzo dikit ya.

Oke, tampilan widget nya seperti gambar diatas ya dan widget ini sangat cocok bagi kamu yang suka dengan warna warni yang tentunya akan semakin menambah kesetiaan pengunjung blog kamu. Yuk disimak ya...

Kunjungi Blogger Dashboard→Select Template→Edit HTML then CTRL + F untuk mencari kode ]]></b:skin>.
Copy semua kode script dibawah ini, dan paste tepat diatas kode ]]></b:skin>.

/* Multi colored - Numbered Popular Post Widget By Digitalhubinc.com */

#PopularPosts4 ul li:hover{

background-color: #ffffff;

}

#PopularPosts1 ul li{border-bottom:2px dotted #999999;}

#PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

}

#PopularPosts1 ul li .item-thumbnail:hover{

-webkit-transform: rotate(-17deg);

-moz-transform: rotate(-17deg);

-o-transform: rotate(-17deg);

}

#PopularPosts1 ul li .item-title {color:#fff;}

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px}

#PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li + li{background:#e30d31;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#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{position:absolute;top:20px;right:-15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NSmg4inKa0wU8FUksRIZiPJVPhMaUzW6ELreRk6mTUhg6dbDkmKXkDWO-TUDGYkvSLJQzyGvEtkW2_MslM34VPuFf0yiVOaBp_0l3sALij76g6C64S0Sjn_EiyvEP9aWUUuYAv6X9Zdv/s1600/waved-circle.png) no-repeat; width:32px;height:32px;text-align:center;font-size:15px; padding-top:13px; font-weight: bold; color:#ffffff;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}

#PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none}

#PopularPosts1 {

margin-left: 20px;

}

#PopularPosts1 h2 {color:white;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8a5v1Dx7_TMEtxUlqJSocxveMiVUB7demqnOoV0ME43gTx6PJ9PxBngL4NX84rthrlxMK2kdgNJgXzT5c40514yHB855x88apnJimVjGqJ88IupaVwnmF6o4Zzl6ih-D17VR_PfnCM1Es/s1600/layer2.png) no-repeat;

height:30px;

width: 287px;

margin-left:-5px;

padding-top:10px;

font-size:18px;

text-align: center;

}