Membuat Widget Popular Post Warna Warni di Blogger

Membuat Widget Popular Post Warna Warni di Blogger - Widget Popular Post Adalah Widget yang memuat artikel artikel yang sering di baca oleh visitor blog kita. Otomatis Artikel Itu Menarik Dan Suka Di Baca Pengunjung. Nah, Jika Pengunjung Lain Suka Artikel itu, Orang Lain Pun akan tertarik Untuk Membaca Artikel itu dengan mengeklik Artikel Populer di Widget Popular Post. Supaya Orang Lain Tertuju Pada Widget Popular Post Yang Kita Pasang, Kita Harus Membuat Widget Itu Semenarik Mungkin Dengan Cara Memberi Warna Menarik Pada Widget Tersebut. Kali ini saya akan membahas bagaimana cara membuat widget popular post warna warni di blogger

Membuat Widget Popular Post Warna Warni di Blogger

1. Pasang Widget Popular Post Dengan Cara Masuk Tata Letak => Tambahkan Widget => Artikel Populer lalu centang sesuai keinginan sobat masing masing.

2. Kemudian Masuk ke Template => Edit HTML

Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>  

/* Popular Post Full Color */
.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:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

3. Kemudian Save / Simpan
Silahkan lihat hasilnya, apakah sesuai harapan anda ? jika kurang menarik anda bisa berkreasi dengan mengubah warna pada CSS diatas, tepatnya pada code

background-color

Demikian Tutorial Membuat Widget Popular Post Warna Warni di Blogger dari saya
Semoga Bermanfaat

Bagikan Artikel Ini