Kalian pasti taukan Widget ini , widget ini sangat unik sekali bagi pengguna Template SEO ini bisa jadi Hiasan Mencolok Widget ini biasa di gunakan untuk POPULAR POST. Cara memasang widget popular post pun cukup mudah, untuk tampilan standartnya (sederhana) kalian hanya perlu menambahkan widget "Entri Populer" yang sudah tersedia pada blogger. Nah untuk menjadikan widget tersebut menjadi lebih menarik kalian dapat memberikan warna pada widget popular post tersebut dengan menambahkan script CSS pada struktur HTML template blog yang kalian gunakan.
Langkah-Langkah Membuat
Pertama kalian membuat Post Popular dulu
1. Langkah pertama silahkan masuk ke dashbor blogger anda.
2. Selanjutnya klik menu TataLetak -> Tambahkan Gadget dan pilih Entri Populer lalu atur untuk menampilkan judul artikelnya saja untuk membuat widget sederhannya terlebih dahulu.
+Pada+Blog.png "Cara Membuat Widget Popular Post Berwarna (Warna - Warni) Pada Blog")
3. Nah kini tahap pemasangan widget popular post sudah selesai, kini kalian tinggal memberikan warna sesuai selera kalian dengan cara memasang script kode di bawah ini di atas kode ]]></b:skin> atau </style> yang ada pada script HTML template blog anda.
/* 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;
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
}
Warna bisa di ubah Ganti Warna kode warna merah dan juga marginya Ganti Kode Berwarna biru sesuai keinginan kalian
Ya begini sudah kalian bisa mengkritik dan koment post ini kalau ingin dapet viewers banyak baca artikel ini CARA JITU MENDAPATKAN BANYAK VIEWERS