Tag Cloud Flash Untuk Blogger Blogspot

Jika anda tertarik membuat label tag cloud flash untuk blogger blogspot seperti yang tampak di bagian kanan blog ini, berikut langkah membuatnya :


Pertama, anda pasang dulu widget label standar dari blogger. Setelah itu, masuk ke editing html. Jangan lupa contreng expand widget template. Kemudian cari kode label berikut :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

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

Ganti kode tersebut dengan :


<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a>, <a href='http://poside.blogspot.com'>Poside</a>, and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;150&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='16'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Keterangan :
300 : Lebar widget.
150 : Tinggi widget.
#ffffff: Warna backgroud widget.
0x333333 : Warna font/huruf.
100 : Kecepatan pergerakan animasi.
16 : Ukuran zoom huruf.

Semua bisa anda ganti sesuai dengan theme anda.









Level 5
Fungsionalitas 5
Estetis 7
Tutorial Indo Poside
Tutorial Inggris -
Sampel Poside

Jika anda tertarik dengan artikel – artikel di blog ini, silahkan berlangganan gratis via RSS Feed, atau jika anda lebih suka berlangganan via email, anda bisa mendaftar di Sini.

11 komentar:

AlvienRizki said...
wahhh... aku pake WP neh... tpi gpp deh... tambah ilmu..

makash... salam kenal...
Admin said...
Salam kenal juga mas. Klo wordpress, malah udah ada sejak lama.
Yaik said...
MAKASIH MAS DAH BISA SAYA/// BANYAK COBA TRIK LAIN,, INI SAYABARU BERHASIL SEMOGA MAS MASUK SURGA AMIN elfaridifaqih@gmail.com
BudiTyas said...
Sama - sama mas :)
Yaik said...
mas! untuk ganti warna backgroun dan teks kok gak bisa saya? mohon petunjuknya! farid
Budityas said...
Saya coba ganti gampang sekali tu mas. Misalnya di blog ini :
http://gosipedia.blogspot.com/

Sekedar mengganti 6 digit kode warnanya aja, tanpa mengubah yg lain. untuk background yang ffffff ,yg font 333333

Atau mungkin browsernya membaca cache di kompie, jadi nggak ngeload dari internet?
tri amri wijaya said...
makasih bro.....ini dia yang Q cari2
BudiTyas said...
You're welcome, brotha..:)
Ayu Tri said...
wah2 rada pusing juga tuh ngeliatin code programnya...
tapi saya ga akan menyerah untuk bisa membuat cloud flash sperti itu..
lam knal Boss...
awalnya bikin pusing tuh kode-nya buanyak banget....but its work...thanks...
feto said...
artikel yang bagus boleh juga tuh koding bikin pusing tapi mo dicoba dulu aaahhhhh...^_^

Terima kasih atas infonya, silakan berkunjung ke sini yaaa...^_^

Post a Comment

Untuk lebih mudah berkomentar, pilih opsi Name/Url. Anda tinggal isi nama saja, plus alamat situs jika anda punya blog/website. Ayo berbagi opini.

 
poside by budityas |n|e