Akhirnya Bisa Juga

Demi Tag Animasi

Rela Bongkar Pasang Blog


Amanda Fazani, awalnya merhatiin namanya, Lela kira dia orang Indonesia, eh ternyata bukan. Saking pengennya tag cloud-nya sampe kirim surat di facebook-nya. Eh, dia pun ga' ngasih solusi kenapa tag yang kubikin ga' munchul-munchul. Tetep aja, ruang tagnya ada tapi ga' munchul tag melayang-layang. Ada tapi ga' ada, bingung. Padahal udah pake' copy HTML aslinya buatan dia (yang dia namain: Blogumus, hasil convert dari Cumulus buatan Roy Tanck. Lalu, insan blogger memadukan dua nama di WordPress dan Blogger dengan nama: Blogumulus.

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin. In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

Update: Improved Widget Code

I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediatly after this line, paste the following section of code:

<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'>
<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> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location. That's all!
Customizing Blogumus
In this default installation, Blogumus includes the following preset variables:

* Width is set to 240px
* Height is set to 300px;
* Background color is white
* Test color is grey
* Font size is "12"

---------------------

Aslinya, blogumus buatan Roy Tanck untuk WordPress. Wordpress.com blocks Flash, how about others? Flash lockA couple of people have emailed me, complaining that my Flickr widget does not work on wordpress.com blogs. As it turns out (I didn’t know this because I host all my blogs myself), Automattic blocks a number of HTML tags, including every single one that could be (ab)used to display Flash movies. There’s a workaround that might work, but that’s far from ideal.

So how about Facebook, MySpace, TypePad and all the other things I don’t personally use? Has anyone tried adding my widget to any of these, or anywhere else of interest? Please leave a comment if you have and report whether it worked or not. I know that it works fine on Blogger, and I’ve just submited the widget to Hyves.nl, which is Holland’s biggest social network, to be considered for inclusion.

Cerita di balik bongkar pasang blog

Sejak semula, sebenernya, kode HTML yang Lela pasang udah bener, ga' ada yang salah. baik yang pake background maupun yang ga' pake. Tapi, persoalannya.., tag-nya ga' munchul-munchul. Padahal dah browsing kesana-kemari dan udah dapet referensi yang cukup, kalo ga' dibilang berlebih. B'coz, semua sama. HTML-nya ya gitu itu. Tanya sana-sini yang blognya ada tag animasinya, ga' ada jawaban solutif.

Akhirnya ngadu sama kakak Lela. Dia penasaran. Dia coba bikin di blognya. Eh, langsung oke. Padahal, dia pasang bukan di blog baru. Coba lagi.., dan coba lagi. Bikin blog baru buat dibongkar-pasang n dipelajari. Lama-lama ketemu persoalan INTInya; Kira-kira, script tag hanya 'mau' membaca (mendeteksi) tag pada posting anyar (kecuali pada css tertentu seperti milik kakak Lela, itupun - mungkin - kebetulan [?])

Itu Lela simpulkan dari kasus-kasus yang Lela temui:

1. Pada blog baru, tag animasi yang disebut cumulus, blogumus, n blogumulus itu langsung mendeteksi.
2. Import blog pada blog baru yang tag animasinya udah aktif bikin tag animasi ngadat n ga' munchul lagi.
3. Semua posting Lela simpan ulang sebagai draft, pasang tag animasi, publish lagi dan.. tag animasi tetep ogah munchul.

Itulah yang Lela lakuin beberapa hari, tiap ada kesempatan. Saking pengen dan penasarannya pada tag cantik n 'genit' tuh. Akhirnya, dengan terpaksa seluruh posting PadhangBulan Lela hapus. Tentu setelah Lela import ke Blogumulus. Blog yang hampir sepekan Lela jadikan eksperimen.

Cape' memang, tapi puas. Dah punya tag animasi, ga' khawatir lagi dengan deretan tag yang memanjang vertikal, nyita ruangan. Lagian, di sini, Lela pengen ngisi dengan tulisan-tulisan Lela sendiri. Bukan hasil 'cloning' dari news online atau semacamnya.

Final answer

Namanya aja hasil kesimpulan kira-kira, jadi.., mungkin benar dan mungkin salah, nisbi. Lela pastikan kini, bahwa semua kesimpulan di atas ada benernya. Tapi yang paling BENAR adalah: JANGAN PERNAH ADA APOSTROF PADA TAG. Misal: Qur'an, Mut'ah, 'Ilmu, Levi's dsc. Tag animasi musuhan sama apostrof. Jadi, tulis aja Quran, Mutah, Ilmu, Levis dst. Maka, tag animasi segera nongol melayang-layang minta disentuh.

Buktiin dech..

Ada satu aja posting ber-apostrof, maka tag animasi pasti mandeg. Barangkali, suatu saat, Roy Tanck dan Amanda Fazani ada waktu untuk menyempurnakan script-nya. Siapa tahu, mungkin Anda?

Jika teman-teman punya solusi praktis terkait instalasi tag animasi, Lela harap jangan pelit sharing di komentar sini ya.. . Makasih..

Print this post
Sincerely,
Padhang Bulan