News Update :

Cara Membuat Widget Posting Populer Menjadi Berwarna-Warni

Diposkan oleh : Posted on Selasa, 16 Juli 2013 - 2:23 AM with 4 comments

Widget Posting Populer yang Sudah Dimodifikasi
Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:
KODE CSS/JAVASCRIPT :
 /* 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%}


Klik Simpan Template. Begitu saja.
Share this Article on :
Cara Membuat Widget Posting Populer Menjadi Berwarna-Warni
Item Reviewed: Cara Membuat Widget Posting Populer Menjadi Berwarna-Warni 9 out of 10 based on 10 ratings. 9 user reviews.

4 komentar:

  1. keren mas
    klo boleh ane minta ijin buat post ulang
    makasih sebelumnya gan :D

    BalasHapus
    Balasan
    1. Trimakasi.
      Oh iya silahkan ....
      sama-sama, semoga membantu yea :p

      Hapus
  2. Saya juga ijin rewrite yah .. Tapi intinya sama . heheheh ....... semoga blognya rame

    BalasHapus
    Balasan
    1. Amin, jangan lupa KunBal nya ya Fadli :))

      Hapus

 

© Copyright 2-Bersaudara 2015 | Design by Herdiansyah Hamzah | Editing by 2-Bersaudara.