Membuat Efek Warna Warni Pada Widget Popular Post Blog

Andrian's Blog - Widget populer post berfungsi untuk memberitahukan pengunjung bahwa artikel tersebut sering dibaca pada blog itu, Tapi pasti Anda pernah melihat populer post dengan bentuk warna-warni yang indah seperti rainbow (pelangi), Ya seperti blog ini. sebenarnya cukup sederhana saja membuat yang seperti ini tapi bagi newbie (pemula) pasti sangat kesulitan tapi tenang saja saya akan membagikan tutorialnya dengan lengkap yaitu Cara Membuat Efek Warna Warni dan Cara Menambah Widget Populer Post Simak berikut ini.

Populer Post Rainbow Style

Cara Membuat Efek Warna-Warni (Rainbow) 

• Pertama masuk di Blogger
• Klik menu "Template" dan "Edit HTML"
• Kemudian Copy semua kode CSS dibawah ini.

/* Popular Post By Andrian's Blog*/
.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 img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
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;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}

• Cari kode ]]></b:skin> atau </style>untuk mempermudah gunakan pencarian dengan Ctrl+F.
• Lalu pastekan kode tersebut tepat diatasnya, klik "Simpan Template" dan lihat hasilnya.
• Anda bisa mengganti kode yang berwarna "MERAH" dengan warna yang Anda inginkan.

Cara Menambah Widget Populer Post

• Masuk di Blogger
• Pilih "Tata Letak" > Klik "Tambah Gadget"
• Klik "Entri Populer"
  
  
• Lalu setting populer post sesuai keinginan Anda.
• Setelah selesai klik "Simpan" dan lihat hasilnya.

Sekian tutorial Membuat Efek Warna Warni Pada Widget Popular Post Blog dari saya. Jika ada yang kurang jelas silakan berikan komentar dan jika Anda ingin Copy-Paste artikel ini harap sertakan Link Sumber !!!

Tweet