Cara Membuat Widget Popular Post Warna Warni

Cara Membuat Widget Popular Post Warna Warni - Halo Sobat Blogger.. Sudah lama saya tidak update artikel ya. Kali ini Saya akan Membuat Sekaligus membagikan kepada Sobat Sobat Tentang Cara Membuat Widget Popular Post Warna Warni.

Gambar Widget Popular Post

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 Kita Akan Membahas Tutorialnya.

Tutorial

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 Template Dan Lihat Hasilnya.  :D

Gimana ? Mudahkan....
Itulah Artikel yang Sangat Singkat dari saya... semoga bermanfaat... :)

Share this post