Cumulus oh Cumulus

Masih ingat tidak dengan fitur cumulus untuk label pada blogger? Yang tulisannya berputar-putar dalam bentuk flash itu loh! Tengok dimari guna mengetahui siapa dibalik dalang si cumulus master of cloud. Beben si bloglang anu ganteng kalem tea juga tidak tauk mana tepatnya ini istilah yg dipakai ;)) Cloud atau cumulus yak :D Tapi inti dari fitur satu ini memang memberikan sentuhan tersendiri. Lain dimata lain dihati, mirip Beben juga lain dimata ^{(mata sapi mksdx)} tapi selalu dihati :x
Teknik lain dari feature satu ini, Beben dapetin dari blog berbasis Wordpress. Mengusung dari sana, coba-coba praktek ke blogspot, ternyata bisa berfungsi juga :-"

Walau sedikit rumit untuk pemasukan kategori (tag) kedalam trick berikut, tapi hack yang akan Beben sharing memiliki kelebihan bisa memasukan tag secara bebas tidak terpatok yang ada di blog kita. Mau tag secara search, video, RSS dari web/blog lain atau apapun mungkin bisa juga sob :D Hurufnya mau gede segede tong air bisa, warna bebas, width, height, dan speed juga bisa diseting menurut kehendak. Tinggal sobat berkreasi memainkan syntax link saja ;)

Live Demo

Tertarik dengan ini? Kemon kita lanjut...geboy mang... Kita cara cepat saja yak :D
Add a Gadget ► HTML/Javascript

Bumbu-bumbu bin ramuan

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
//<![CDATA[
     google.load("visualization", "1");

// Set callback to run when API is loaded
     google.setOnLoadCallback(drawVisualization);

// Called when the Visualization API is loaded.
     function drawVisualization() {

// Create and populate a data table.
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Tag');
       data.addColumn('string', 'URL');
       data.addColumn('number', 'Font size');

       data.addRows(12);

       data.setCell(0, 0, 'TITLE1');
       data.setCell(0, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label1');
       data.setCell(0, 2, 2+2.5*10);
       data.setCell(1, 0, 'TITLE2');
       data.setCell(1, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label2');
       data.setCell(1, 2, 3+2.5*8);
       data.setCell(2, 0, 'TITLE3');
       data.setCell(2, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label3');
       data.setCell(2, 2, 2+2.5*11);
       data.setCell(3, 0, 'TITLE4');
       data.setCell(3, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label4');
       data.setCell(3, 2, 2+2.5*12);
       data.setCell(4, 0, 'TITLE5');
       data.setCell(4, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label5');
       data.setCell(4, 2, 2+2.5*4);
       data.setCell(5, 0, 'TITLE6');
       data.setCell(5, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label6');
       data.setCell(5, 2, 2+2.5*7);
       data.setCell(6, 0, 'TITLE7');
       data.setCell(6, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label7');
       data.setCell(6, 2, 2+2.5*3);
       data.setCell(7, 0, 'TITLE8');
       data.setCell(7, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label8');
       data.setCell(7, 2, 2+2.5*5);
       data.setCell(8, 0, 'TITLE9');
       data.setCell(8, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label9');
       data.setCell(8, 2, 2+2.5*6);
       data.setCell(9, 0, 'TITLE10');
       data.setCell(9, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label10');
       data.setCell(9, 2, 2+2.5*7);
       data.setCell(10, 0, 'TITLE11');
       data.setCell(10, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label11');
       data.setCell(10, 2, 2+2.5*8);
       data.setCell(11, 0, 'TITLE12');
       data.setCell(11, 1, 'http://YourNameBlog.blogspot.com/search/label/Title Label12');
       data.setCell(11, 2, 2+2.5*9);

// Instantiate our table object.
       var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));

// Draw our table with the data we created locally.
       vis.draw(data, {text_color: '#ff0000', speed: 100, width:200, height:300});
}
//]]>
</script>

<div id="mydiv"></div>

Masukan deh itu bumbu ke HTML/Javascript setelah melakukan settingan. Syntax label itu yang bisa sobat kreasikan mau disisipkan dengan apa. Beben disana sudah membuat 12 link syntax. Kalau sobat mau menambahkan atau mengurangi links harap diperhatikan kode script data.addRows

Kedua jenis script yg ada diatas telah terhostingkan dibawah naungan embah google. Satu yg harus diperhatiin wordcumulus.js.

/**
* An animated, rotating cloud of words, based on flash
*
* Usage prequisities:
* - Include the js files http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js
* and http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js
*
* Options:
* - text_color (e.g., '#ff0000')
* - hover_text_color
* - height (in px, default = 300)
* - width (in px, default = 400)
* - speed (default = 100, higher means faster rotation)
*/

var gviz_word_cumulus = {};

gviz_word_cumulus.WordCumulus = function(container) {

/**
* The container on which to draw this chart.
* @type {Element}
* @private
*/
this.container_ = container;
};


gviz_word_cumulus.WordCumulus.prototype.draw = function(data, options) {
this.data_ = data;
options = options || {};
var url = "http://word-cumulus-goog-vis.googlecode.com/svn/trunk/tagcloud.swf";
var params = {};

var attributes = {};
attributes['allowScriptAccess'] = 'always';
attributes['wmode'] = 'transparent'; // To resolve z-index issue on FF.
attributes['id'] = this.container_.id;

var flashvars = {
'mode' : 'tags',
'distr' : 'false',
'tcolor' : (options.text_color || '#ff0000').replace('#', '0x'),
'hcolor' : (options.hover_text_color || '#000000').replace('#','0x'),
'speed' : (options.speed || 100)
};
var tags_xml = "<tags>";
for (var row = 0; row < data.getNumberOfRows(); row++) {
var label = data.getFormattedValue(row, 0);
var uri = data.getFormattedValue(row, 1);
var font_size = 10;
if (data.getNumberOfColumns() > 2) {
font_size = data.getFormattedValue(row, 2);
}
var tag = "<a href='" + uri + "' target='_blank' style='font-size:" + String(font_size) + "pt;'>" + label + "</a>";
tags_xml = tags_xml + tag;
}
tags_xml = tags_xml + "</tags>";
flashvars["tagcloud"] = tags_xml;
swfobject.embedSWF(url, this.container_.id, (options.width || 400), (options.height || 300), '10', '', flashvars, params,
attributes);

};

Nah silahkan mau dibeberkan begitu atau dihosting :P Demikian alternatif cumulus dengan mengambil trick for WP-Cumulus.

Resource by: http://code.google.com/p/word-cumulus-goog-vis/wiki/UserGuide
Happy cumulus \m/