Beranda » bloging » Membuat Label Animasi "blogumulus"

Membuat Label Animasi "blogumulus"

Ditulis oleh: -
Blogumulus adalah sebuah label tag cloud berbentuk animasi atau label flash. Blogumulus bentuknya lebih unik karena teks label tag cloud ini bisa bergerak memutar seperti globe bila mouse kita arahkan ke area Blogumulus. Blogumulus  awalnya bernama Tag-Cumulus yang diciptakan oleh Roy Tanck untuk pengguna Wordpress. Dan berkat kreatifitas Amanda Fazani sebagai pengguna  blogger, Tag-Cumulus yang banyak dikenal dengan nama Blogumulus pada waktu yang lalu bisa dipakai di blogger.  Tapi entah kenapa sekarang Javascript yang yang saya post pada artikel ini sudah tidak berfungsi. Jadi saya harus update ulang artikel ini, agar sobat blogger yang tetap menginginkan animasi ini takkan kecewa. Untuk itu saya ucapkan terima kasih banyak pada sobat Apal dan sobat Amricow, karena komentar mereka saya jadi tahu kalau kode yang saya tampilkan sudah kadaluarsa...sa...sa....
OK....bila sobat tetap menginginkan animasi ini, saya ada solusi lain. Tapi animasi Blogumulus ini tidak menghubungkan dengan label atau tag cloud, melainkan kita memberi tag link secara manual. Walaupun demikian Blogumulus ini tidak kalah menarik dibanding dengan Blogumulus yang sudah kadaluarsa tadi.
LIHAT DEMO
Silahkan anda ikuti langkah - langkah berikut ini bila anda berminat membuat :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman




 
3. Tambah Gadget



 
4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript




 
5. Copy dan paste kode dibawah ini pada gadget tersebut :
<div align="center" style="display:true;background:#ffffff; border: 1px solid rgb(198, 198, 198); padding: 0px;">
<script src="http://sites.google.com/site/ruangsc/enes/swfobject.js" type="text/javascript">
</script>
<br />
<div id="flashcontent">
<a href="http://www.carabuatwebgratis.com/">Cara Buat Web Gratis</a></div>
<script type="text/javascript">
var so = new
SWFObject('http://www.swfcabin.com/swf-files/1275932799.swf', 'tagcloud',
'400', '200', '7', '#000000');
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfbfe01");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "150");
so.addVariable("tagcloud", "<tags><a href='ULR' style='15'>JUDUL</a><a href='ULR' style='11'>JUDUL</a><a href='ULR' style='20'>JUDUL</a><a href='ULR' style='25'>JUDUL</a><a href='ULR' style='15'>JUDUL</a><a href='ULR' style='10'>JUDUL</a></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script></div>
Catatam :
  • Nilai 400 adalah Lebar ruang animasi.
  • Nilai 200 adalah Tinggi ruang animasi.
  • Lebar div 100% (anda bisa menentukan ukuran sendiri).
  • Semakin banyak link yang anda masukkan akan terlihat lebih indah. 
  • Atribut style menentukan besar kecilnya teks yg muncul
  • Untuk menambah tags / Link, harus rapat tanpa spasi atara link satu dengan yang lain seperti berikut :
<a href='ULR' style='15'>JUDUL</a><a href='ULR' style='15'>JUDUL</a>

6. SIMPAN
 
Ada banyak template yang tidak suport dengan script diatas, seperti Blog ini. Tapi setelah Edit Bin Edit, akhirnya saya mendapatkan solusi.
Anda bisa lihat Animasi  Blogumulus hasil rekayasa ulang saya, yang ada pada sidebar kanan Blog ini.
Jadi intinya script ini harus dipastikan pada deretan kode tertentu harus benar - benar rapat, terutama pada penulisan Link / ULR.
Berikut script sebagai solusi, apabila anda menggunakan script tidak bekerja dengan baik :
<div align="center" style="display:true;background:#ffffff; border: 1px solid rgb(198, 198, 198); padding: 0px;"><script type="text/javascript" src="http://sites.google.com/site/ruangsc/enes/swfobject.js"></script><a href="http://www.carabuatwebgratis.com/">Cara Buat Web Gratis</a><div id="flashcontent"><embed width="400" height="200" flashvars="tcolor=0xfbfe01&amp;mode=tags&amp;distr=true&amp;tspeed=150&amp;tagcloud=&lt;tags&gt;DERETAN ULR ANDA TANPA JARAK SPASI&lt;/tags&gt;" allowscriptaccess="always" wmode="transparent" quality="high" bgcolor="#000000" name="tagcloud" id="tagcloud" src="http://www.swfcabin.com/swf-files/1275932799.swf" type="application/x-shockwave-flash"/></div></div>
Catatan : Saran saya..., tidak langsung memasukkan Link/ULR satu persatu pada script diatas. Tapi sebaiknya anda buat pada notepad DERETAN ULR TANPA SPASI, dengan catatan format word wrap pada notepad tidak di centang. Untuk memastikan ULR yg anda buat benar - benar utuh.
Setelah jadi, deretan ULR yg anda buat tadi  harus di PARSE. 
Anda bisa gunakan TOOL PARSE HTML gratis DISINI
Oh iya maaf, warna background saya ganti dengan warna Putih, tapi anda bisa menggantinya sesuai selera anda.

Sumber : disini.

Artikel terkait :