Sunday, April 21, 2013

15
Little Secrets

Tutorial : Widget Popular Posts Warna-Warni

Assalamualaikum (^___^)v
*kalau tak jawab dosa, kalau jawab AWESOME*


Atas permintaan beberapa orang beLogger, jadi saya buatkan tutorial ini.. Tutorial apakah? Bagaimana untuk membuat widget ini -->


PROSEDUR 1
  • Dashboard --> Layout --> Add a Gadget --> Popular Posts
  • Tick pada "All the Time"
  • Untick "Image Thumbnail" and "Snippet"
  • Displat post ikut suka korang-korang nak letak berapa
  • Save!

PROSEDUR 2
  • Dashboard --> Template --> Edit HTML
  • CTRL + F utk buka kotak search
  • Search for this code
]]></b:skin>
  • Dah jumpa? Copy pula code di bawah ini & pastekan DIATAS code yg korang-korang search tadi
/* 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: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; 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:left;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}
  • Preview dulu
  • Kalau dah jadi & puas hati, sila SAVE!

Harap korang-korang faham & dapat membantu mereka-mereka yg bertanya.. Ada apa-apa lagi, sila lar request.. InsyaAllah, akan membantu kalau boleh.. Selamat mencuba!! (^___^)v

Happy beLogging from beLOg FakhRuru
- lebih AWESOME daripada biasa -
(^___^)v

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

15 comments:

luqman zakaria said...

semard bende..aku pon dh letak kt blog!hehe

Misz Nad said...

trima kasihh banyak2 :d

Misz Nad said...

trima kasihh banyak2 :d

Lelaki Ini said...

pening :(

hahaha

Fakhruru said...

@Lelaki Ini
pning kt mna lar plk? hohoho

Nurul Yuyu said...

tak kuar laa masa search tu,waa~pening laa guna edit html yang baru ni. :(

Fakhruru said...

@Nurul Yuyu
lbh kurng sme jer dgn html yg lma.. pstikn kotk search tu ada dlm box edit html, bkn kt luar.. rjuk gmbr di atas

Lyeen De Syifa said...

warna warni itu sweett..:) suka
tq awk..:D

maria firdz said...

terima kasih cikgu... menjadi tutorial ni.. :)

Bain Zuyahir said...

Tak jadi pon ... plizz ajar kan saye yang newblogger nih ... plzz plzz http:baintakagie.blogspot.com/

Fakhruru said...

@Bain Zuyahir
sbrng ptnyaan antr jer msg dkt fanpage sya k

Fakhruru said...

@maria firdz
same2 kasih ^^

shekechik said...

jadiiiii...tenkiuuuu sifuu... =)

shekechik said...

jadiiiii...tenkiuuuu sifuu... =)

Fakhruru said...

@shekechik
most welkem ^^

Related Posts Plugin for WordPress, Blogger...
Copyright @ boLey paNdAnG-paNdAnG, jGn cUri-cUri : FakhRuru