Iron Man Mark IV

Selasa, 30 Julai 2013

TUTORIAL : cara buat Popular post Warna Warni

 


 

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

Hi Salam 1 malaysia? Hari ni bain nak buat tutorial yang dah berhabuk ... hehe 
                          Korang tau kan ape itu Popular post? hah tengok gambar di atas?

Pada asalnya Popular post sangat biase dan terlalu simple? jadi, bagi mereka² yang rajin memperbaharui blog ni sudah semestinye ingin kan blog yang cantik termasuk menggunakan tutorial nie....

Cara nya cukup senang dengan mengikut Step² di bawah?...

1. dashboard > design > page elements > add a widget > popular post
2.  korang edit dekat situ. MOST VIEWED & SHOW tu. tak nak letak pictures UNTICK je image thumbnail tu. display post tu , korang letak lah berapa je. letak 5 pun cunn jugak^^
3. SAVE :)
4. dashboard > design > edit HTML > ( tick expand widget templates )**PENTING NI TAU!
5. tekan CTRL+F cari code ni  
 
                                                ]]></b:skin>

6.lepas tu copy code di BAWAH ni dan PASTE di ATAS code tadi

/* Rainbow Popular repost by http://baintakagie.blogspot.com*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:20px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular repost by http://baintakagie.blogspot.com*/



7. yang warna MERAH tu . korang boleh tukar code warna dia . TEKAN SINI !
preview dulu . kalau menjadi . SAVE.


 Tamat sudah kesemua tutorial ni? Hope korang cuba... SELAMAT MENCUBA ! ^_^


IKHLAS DARI :


 


TERIMA KASIH KERANA SUDI BACA ENTRI NI ! SILA KOMEN DI BAWAH YEA...

COPYRIGHT BY : BAIN ZUYAHIR 2013