6:32 AM
Unknown
Flash animated tag cloud is just the replacement of the default label
tag. The default label tag of blogger is not so nice looking and not so
eye catching. Moreover, there are numbers beside the tags. I hate
numbering beside tags. This dull looking label tags can easily be
replaced by flash animated tag cloud. Implementation of flash animated
tag cloud is very easy and simple. This hubpage will give you step by
step procedure to add flash animated animated label tags cloud to your
blogger or blogspot blog. Moreover, if you like this flash animate label
tag clouds, you can also apply this techniques to your website also.
Install
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://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("http://sites.google.com/site/bloggerustemplatus/code/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 It
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"
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
The width (currently 240) is highlighted in red,
while the height (300px default) is highlighted in blue. These numerical
values specify the width and height in pixels, so you can alter these
of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line:
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:
so.addVariable("tcolor", "0x333333");
Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this 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>");
You
can alter this to ensure tags are displayed in a bigger or smaller font
if you prefer by changing "12" to a larger or smaller number. While
making any of these changes, you should be able to preview your widget
and be certain that your new choice of color, dimensions and background
are suitable for your needs.
Posted in: 
Posts
0 comments:
Post a Comment