Tutorial : Letak Popular Post Bewarna-Warni

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


  
Kih3.. Actually,dah dua orang dah tanya macm mana nak buat popular post colorfull tu. I je malas buat. HAHA! XD. Okey lah

>> Layout,add a gadget,tekan F3 search POPULAR POST, lepastu

dah siap save template :-)

  Dah? Okey. Tk siap lagi weh! pergi template, tekan F3 search kod 

 ]]></b:skin>
Lepastu copy kod hadifah bagi ni paste ATAS kod yg korang search tadi X)

 /* Rainbow Popular Post by http://hzndi.blogspot.com*/#PopularPosts1 ul li
a:hover{
color:#fff;
text-decoration:none
}
#PopularPosts1 ul li
 a {-webkit-text-size-adjust: auto;
 -webkit-text-stroke-width: 0px;
  color: #000;
 display: block;
 font-family: Century Gothic;
font-size: 13px;
font-style: normal;
font-variant: normal;
 font-weight: normal;
 letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
 min-height: 30px;
 orphans: 2;
padding: 0px;
text-align: -webkit-auto;
 text-decoration: none !important;
 text-indent: 0px;
text-transform: none;
white-space: normal;
 widows: 2;
 word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:right;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px
}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
border:2px solid #ccc
;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Dan,hasilnya jadi lah macam hadifah tu.. Tak paham tanya.. kod2 tu,sebenanya boleh edit. Tpi,hadifah tak tahu kat mana.. K. bye. Tak faham tanya XD...

5 comments:

  1. Hai awak , kalau pakai blogskin codenya macam mana . Saya pakai blogskin . Btw , thanks for the tuto :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Entri Yang Best :) Dah Lama Follow Blog Awak . Follow Blog Ni Kalau Sudi :) http://mynameishafizah.blogspot.com/

    ReplyDelete
  4. macam mana nak edit kod tu erk ? :)

    ReplyDelete

Tekan "publish" sekali je tau

Terima kasih komen

BUDI BAHASA BUDAYA KITA :)