Cara Membuat Tag Cloud 3D

12/02/2009 Blogger Tips Trik Blog Tutorial Blogger Widget
Halo para sobat blogger!! Kang Fatur ada kabar gembira lagi nie buat para sobat khususnya yang pencinta blog Kang Fatur hehe PD amat ya?????.

Yeah! Tadi malam sedang mencari animasi "Tag & Clouds" widget. Kang Fatur menemukan situs menarik oleh Roy Tanck's. Penulis telah menulis sebuah skrip yang sangat baik untuk menampilkan tag, kategori yang berputar dalam 3D animasi. Tapi Roy Tanck's telah menulis skrip ini hanya untuk Wordpress yang disebut "WP-Cumulus": tetapi para blogger jangan bersedih hati, Kang Fatur sudah atur alias dsain lagi supaya bisa dipasang di Blogspot dan akhirnya Alhamdulillah bisa buat Blogspot juga hehe. dan baru pada Sore ini Kang Fatur bisa terbitkan (bagi-bagi) pada kawan/sobat. Untuk lihat contohnya dibawah ini :





O.K Para sobat semua tiba saatnya kita ke tahap pemasangan karena waktu semakin petang aja.

Seperti Biasa

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan "Tag Clud".
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget

Kemudian paste script berikut : tapi ada baiknya para sobat paste dulu di Notepad untuk merubah terlebihdahulu

<script src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js" type="text/javascript"></script>
<div id="flashcontent" style="overflow: visible;"><embed quality="high" allowscriptaccess="always" flashvars="tcolor=0xffffff&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;a href='http://LINK SOBAT DISINI.COM/'style='12'&gt;JUDUL LINK SOBAT DISINI&lt;/a&gt;&lt;/tags&gt;" type="application/x-shockwave-flash" height="300" src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" id="tagcloud" bgcolor="#000000" width="300" name="tagcloud"></embed></div>
<script type="text/javascript"><br/>var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#000000");<br/>// uncomment next line to enable transparency<br/>//so.addParam("wmode", "transparent");<br/>so.addVariable("tcolor", "0xffffff");<br/>so.addVariable("mode", "tags");<br/>so.addVariable("distr", "true");<br/>so.addVariable("tspeed", "100");<br/>so.addVariable("tagcloud");<br/>so.addParam("allowScriptAccess", "always");<br/>so.write("flashcontent");<br/></script>Tag Cloud by <a href="http://kangfatur.blogspot.com/" starget="new">Kang Fatur</a>


PERHATIAN!!!
Cari kode seperti ini :
<a href='http://LINK SOBAT DISINI.COM/'style='12'>JUDUL LINK SOBAT DISINI</a>
Kemudian ganti kode yang berwarna Kuning dengan Link tujuan sobat lalu teks yang berwarna Merah ganti dengan Judul Link sobat yang akan ditampilkan.


Jika Tag Cloud Widget ini akan sobat sesuaikan baik itu warna Background, Warna Teks dan Width serta Hight nya sobat cari kode seperti dibawah ini :

1. Untuk warna Background cari kode bgcolor="#000000" kemudian ganti dengan kode warna yang diinginkan
2. Untuk warna teks cari kode tcolor="ffffff" emudian ganti dengan kode warna yang diinginkan
3. Untuk Lebar dan Tinggi cari kode height="300" dan width="300" ganti sesuai dengan keadaan template sobat,

Yaaa pokoknya atur aja deech O.K mungkin para sobat juga dah pada ngerti ya khan???

Setelah langkah demi langkah selesai klik Simpan dan lihat blog!!

Selamat mencoba!! semoga berhasil dan bermanfaat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

4 comments

Kalau Label yang dibikin seperti itu, bisa ga kang ?? :36

Balas

Buat Lina : yaa bisa SOB tinggal sobat utak atik aja OK

Balas

Terima kasih gan infonya sangat bermanpaat...

Balas