Add Label Cloud 3D Rotating Label

5 comments
 

How It Works 
Blogumus allows you to display your site's tags, categories or both using a Flash movie that rotates them in 3D. It works just like a regular tags cloud, but is more visually exciting. Clicking the tags can be a little hard (depending on your speed setting) but does take you to the appropriate page.


1. From the dashboard > design > edit HTML > Expand widget templates.


2. Backup template (download full template) you as a precaution. (More info)

3. Using the find function (ctrl + F) looking for <b:section class='sidebar' id='sidebar' preferred='yes'> or <b:section-contents id='sidebar-right-1'> or <b:section class='sidebarright' id='sidebarright' preferred='yes'>
4. Copy the code below and paste it after the found section 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://sites.google.com/site/bloggerustemplatus/code/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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
5. Then preview your template. After you satisfied with the result, save it. If it goes wrong, try again or upload your saved template and start over again.
Edit the colors and dimensions as required, or move it to a different location.

Default Blogmulus Variables
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"
You can also change the default parameter as you want.

Customizing Blogmulus
To customize the dimensions and background-color, modify the following line :

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
To customize the font color,modify the following line :
 so.addVariable("tcolor", "0x333333");
To customize the font size,modify the following line :
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>");
Requirements
For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe. I'm not sure that this installation will support special characters as tags (only Latin characters supported at present).

This tutorial was adopted from Amanda's Tutorial.

5 Responses so far.

  1. kady says:

    nothing shows up in the preview! what should i do?

  2. Really good content. I am admired on your blog which you have taught me in a different way. Good work.

  3. yaariana says:

    This was PERFECT. Thank you so much for posting this!

  4. I like this post. This is really great.
    This page provides lots of advantages.
    I got some important information on 3D Label which really helps you.
    If you want more information then Click Here

Leave a Reply

Related Posts Plugin for WordPress, Blogger...