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..

nih contoh apa yang kita nak buat

#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'>

<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