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 |
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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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 == "false"'>
<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
