Breaking News
Loading...
Tuesday, May 1, 2012

Tutorial Popular post seperti amazn network



oke sekarang nih blog aku berbalik kepada topik sebenar blog ini ditubuhkan iaitu memberikan ilmu secara percuma kepada semua rakyat malaysia setelah beberapa hari blog aku nih di update mengenai isu Bersih 3.0 yang agak panas so hari nih aku nak bagi tutorial yang menarik untuk anda semua gunakkan di blog anda iaitu Popular post yang hampir sama dengan Amanz Network siapakah amanz network nih aku pun x berapa nak tahu pasai dia nih yang pastinya blog dia nih hari-hari keluar majalah...biasa la blogger banyak duit boleh la iklan kan diri dalam majalah hari-hari..
Popular Post seperti Amanz Network
nih contoh apa yang kita nak buat



Edit Blog Template

Go to Blogger Dashboard > Design > Edit HTML.
Download/Backup your template.
Tick Expand Widget Template
 check box lepas tuh cari kot nihh

 /* Variable definitions ====================

 lepas tuh copy code dibawah paste kan di bawah code diatas

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1"> <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/> <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/> <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/> <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/> <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/> <Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/> <Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/> </Group>






lepas tuh cari plak code  ]]></b:skin>

pastekan code dibawah diatas code  ]]></b:skin>

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%} #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:$(PopularPosts.background.color7);width:60%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #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{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:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}


lepas tuh cari plak code dibawah

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

delete bermula dari code diatas sampailah korang jumpa </b:widget> delete nih slow2 kalau laju t kalau terlajar habis la....lepas dah delete korang copy code dibawah paste di tempat anda berhenti delete tadi,

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBsX6NTBs7ULnYkKwa-He9FrAZSCA0zsKwIoQLCqjgleUU5fa7hiHbgyZF8d5jNLvmO7xuejRb54x4prr-jlD7irQ1BlR8ZfdKhOr6EN4twPjgdYkVTOPc2xDgkFYqcUPQuEcfnKuzZKs/s1600/defaultimage.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <div class='clear'/> <b:else/> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBsX6NTBs7ULnYkKwa-He9FrAZSCA0zsKwIoQLCqjgleUU5fa7hiHbgyZF8d5jNLvmO7xuejRb54x4prr-jlD7irQ1BlR8ZfdKhOr6EN4twPjgdYkVTOPc2xDgkFYqcUPQuEcfnKuzZKs/s1600/defaultimage.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> <div class='clear'/> </b:if> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget>





  • Go to Blogger Dashboard > Design > Page Elements
  • Click on the EDIT link of Popular Posts widget
  • Select "display up to 7 posts".
  • Now Save the widget       

  • Lepas tuh siap just tekan save template and done korang akan nampak Popular Post korang jadi warna warni
    kalau korang nak ubah warna


    • Go to Design > Template Designer
    • Advanced > Popular Posts Background
    • Now customize the widget as you wish and save your template


    done kalau nak tgok real punya korang tgok la kat blog aku punya popular post... so tQ

    2 comments:

    Anonymous said...

    hey all sampankertasa4.blogspot.com blogger found your website via yahoo but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have found website which offer to dramatically increase traffic to your website http://xrumerservice.org they claim they managed to get close to 1000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my website. Hope this helps :) They offer most cost effective backlink service Take care. Jason

    Anonymous said...

    sampankertasa4.blogspot.com go to these guys Ini perasaan sosialitas jelas dalam setiap pesta kolam renang atau setiap kali tetangga membantu jumpstart kendaraan bermotor atau mengubah ban pada penduduk lansia

    Quick Message
    Press Esc to close
    Copyright © 2013 sAmpan KErTas All Right Reserved