feed me
Thursday, April 22, 2010

Many Bloggers were asking how to create a rolling label or tag cloud, so I wanna share how to create it.

This the following steps :

1. Sign in to Blogger.com
2. Select layout tab
3. Select Edit HTML
4. Check Expand Widget Templates
5. Copy-paste code after this code
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label129' 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://elmubarok.fileave.com/labelclouds.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.marewa.info'>marewa</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "100", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfffffff");
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='24'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
7. Save Template

Note:

1. The numbers 180 and 100 width and height of the label cloud, you can change the size of your blog's sidebar
2. Color Code #000000 (Black) is the color of labels Clouds layout, change the color code in accordance with you want.
3. Code FFFFFF (White) is the code of the text will appear, change its color, the color of your choice
4. 100 is the speed in the Clouds label, the higher the number, the faster Clouds will rolling
5. 24 is a measure of size of the text that appears in the label Clouds.

Source : rasiqzonetwork

2 comments:

  • Not sure why it didn't work, try looking at
    http://travellingpolander.blogspot.com

    I expanded everything, then searched for the string " < b:section class='sidebar' id='sidebar' preferred='yes' > "

    afterward, I inserted the whole thing...

  • Very nice

  • Post a Comment