Cara Membuat/Memasang Entri Populer Berwarna Unik Dan Keren Di blogger

Widget ini sudah saya Modifikasi sedikit dan sudah saya coba sendiri dan hasilnya pun sudah saya screenshot. Gambar disamping adalah hasilnya, cara membuatnya pun cukup mudah. Dan bagi kamu yang tertarik memakai widget ini, silakan lihat caranya di bawah ini. Di perhatikan yah !

1. Login ke Blogger.com dengan Akun kamu.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, jangan memakai gambar dan cuplikan. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja.

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu bila perlu

5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

STYLE 1

.PopularPosts {background: #58c2f3;color: #fff;line-height: 1.6;font-size: 100%;border-radius: 5px 5px 0 0;}
.popular-posts {background: #daf9fa;line-height: 1.6;font-size: 100%;border-radius: 0;color: #D2D2D2}
.popular-posts a{color: #2d2b25}
.popular-posts a:hover{color: #fffefc}
.PopularPosts ul {list-style:none;margin:0;padding:0;counter-reset: popcount;}
.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 10px;background: #a9a9a9;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #DEDDDA;box-shadow: 1px 2px 5px #666666;}
.popular-posts ul li:nth-child(1) {background: #f66c9a}
.PopularPosts li {text-transform:uppercase;background:none;margin:0;padding:10px;display:block;clear:both;overflow:hidden;list-style:none;border-bottom: 1px solid #53492C;font:13.5px/140% Coda;}
.PopularPosts li:hover{background:#4ebcfb;}
.PopularPosts li a{text-decoration:none;}

STYLE 2

/* 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;font-size:15px;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:14px}

Style 3

 .sidebar li:hover {
  background: #FFFFE0;
  background: -moz-linear-gradient(left center , #FFFFF5 0%, #FFFFC2 50%, #FFFFC2 0%, #FFFFF5 100%);
  background: -webkit-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%);
  background: -o-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%);
}

6. Simpa dan kamu lihat hasilnya, pasti cantik sekali sob :D

Note : Tanda Warna Biru bisa dirubah sesuka hati dengan warna kesukaan anda.