How to Make 3D Tag Cloud

1:56 AM | Labels: Tutorial, Widget/HTML/JavaScript

One of widgets that can beautify your blog is Tag Cloud 3D. It makes your labels looks more beautiful with a 3D animation that can spin around. Just like, see demo.

If you're interested with this widget just do these following steps:

Go to your dashboard => select layout => add a gadget => select labels => check cloud=> save;
Go to your dashboard => select layout => add a gadget => select HTML/JavaScript;
Copy and paste this following script into the HTML/JavaScript box (leave the box title blank)

<left><h2 class="title">Labels</h2> <div class="widget-content"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <div id="wpcumuluscontent5733682"> <script type="text/javascript"> var flashvars = { tcolor: "0x000000", tcolor2: "0x000000", hicolor: "0xce1449", tspeed: "40", distr: "true", mode: "tags" }; var params = { allowScriptAccess: "always" }; params.wmode = "transparent"; x = document.getElementById("Label1").getElementsByTagName("a"); trans = document.getElementById("Label1").style.display="none"; var tagcloud; var url = "http://" + document.domain + "/search/label/"; for (var i = 0; i < x.length - 1; i++) { tagcloud = tagcloud + "<a href='"+encodeURIComponent(url + encodeURIComponent(x[i].innerHTML))+"' class='tag-link-24' title='15 topics' style='font-size: 15pt;'>"+x[i].innerHTML+"</a>"; } flashvars.tagcloud = "<tags>"+tagcloud+"</tags>"; swfobject.embedSWF("http://www.taiphanmem.org/wp-content/plugins/wp-cumulus/tagcloud.swf?r=2520752", "wpcumuluscontent5733682", "380", "250", "9", "expressInstall.swf", flashvars, params);</script></div></div></left>

Note:
hicolor: "0xce1449" => color of text when it's pointed
tspeed: "40" => the speed of spinning
style='font-size: 15pt => font size of text you want to display
wpcumuluscontent5733682", "380", "250" => the high and the wide of widget
you can change the red text as whatever you want

Place the script exactly below label widget
Save and enjoy.

....................................................................
Alternative

Go to your dashboard => template => edit HTML => proceed => check expand widget templates =>
Search this below code (use ctrl+f (Mozilla)/ F3 (Chrome)

Copy this below code and paste exactly under the above 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://dhedie-tips-triks.blogspot.com'>Dhedy | Tips & Triks</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>

Note:

# Width = 240px
# Height = 300px
# Background = #ffffff white
# Text color = 0×333333 (gray)
# Font size = 12