Tag Cloud Widget

Kali ini aku nak kongsikan widget yang ngetop setakat ini. hehehehe
Nama widget ini ialah Blogumus. Sila refer gambar atau tengok blog ini:-


Untuk godek yang lepas iaitu membuat tag/label cloud, ianya kurang menarik berbanding yang kali ini. So cuba-cubalah.

Pastikan setiap pos korang sudah mempunyai label. Cara-caranya ialah:-

1. Layout>Edit HTML. Cari kod <b:section class='sidebar' id='sidebar' preferred='yes'>

Copy kod di bawah dan paste selepas kod di atas.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash"
data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf"
width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/
wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=
tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>
<data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy
Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda
Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;


</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>


Sekarang cuba korang preview dahulu blog korang, kalau sudah ada pada sidebar korang bolehlah save terus.

2) Ok sekarang cara hendak customize widget ini bersesuaian dengan blog korang.

Pada kod di atas, aku telah bold dan warnakan, kalau korang nak ubah mengikut kesesuaian blog korang, just ubah kod tersebut.

Hijau = width
Biru = height
Coklat = Background widget
Ungu = Warna text
Pink = Saiz text

Ok.. harap korang dapat aplikasikan widget ini bagi memeriahkan blog korang.

Image Hosted by ImageShack.us

12 comments:

Post a Comment