Xivanki Share !!: Cara Membuat Widget Popular Post Warna Warni

Cara Membuat Widget Popular Post Warna Warni - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Widget Popular Post Warna Warni !! Semoga tulisan dengan kategori Edit Popular Post !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Widget Popular Post Warna Warni ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Cara Membuat Widget Popular Post Warna Warni - Widget popular post yang sangat colourfull ditambah icon dan nomor urut yang pastinya akan membuat tampilan blog sobat lebih keren lagi.Seperti apa demonya, kira-kira ya seperti gambar diatas. Widget ini sangat bagus untuk blog pribadi sobat ataupun bisa juga sebagai pemanis tampilan toko online sobat.Terus cara buatnya bagaimana ? cara membuat nya juga sangat gampang, tinggal sobat ikuti dua langkah dibawah ini :

1. Sobat pilih pada konfigurasi widget Posting Populer, pastikan bahwa sobat memilih model widget berupa thumbnail dan judul.

2. Masukan kode CSS dibawah ini dan letakkan di atas kode ]]></b:skin> atau </style> :

/* Custom CSS for Blogger 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 & 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%}

Set elah itu sobat simpan, dan selesai.

Selamat, sobat sudah punya widget popular post warna-warni yang keren.

Script : http://www.dte.web.id