Modifikasi Widget Popular Post Menjadi Berwarna Warni di Blog

Modifikasi Widget Popular Post Menjadi Berwarna Warni di Blog - Ketika saya melakukan surfing, seringkali saya melihat widget popular post yang berwarna-warni pada sebuah blog.

Nah sebenarnya untuk membuat atau memodifikasi widget popular post menjadi berwarna-warni itu sangat mudah. Anda hanya perlu menambahkan kode CSS saja untuk membuat widget tersebut menjadi berwarna-warni.

Sehingga tampilan widget popular post yang Anda miliki akan terlihat lebih menarik dan enak untuk dilihat oleh pengunjung. Berikut tampilan popular post yang sudah dimodifikasi menjadi berwarna-warni.

Untuk Anda yang juga ingin memiliki widget popular post seperti gambar di atas. Silahkan ikut tutorial berikut ini ya.

MODIFIKASI WIDGET POPULAR POST MENJADI BERWARNA WARNI DI BLOG

1. Buka Blogger > Tata Letak > Tambah Gadget > Pilih Entri Populer, atur agar popular post menampilkan thumbnail dan judul.

2. Setelah itu masuk ke editor HTML Template. Salin dan letakkan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

/* Custom Popular Post Widget */
.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;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  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;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

3. Terakhir simpan template, kemudian lihat hasilnya.

Demikian  Modifikasi Widget Popular Post Menjadi Berwarna Warni di Blog. Semoga bermanfaat.

Tweet