Animated Cloud Tag Menu List for Blogger

By default blogger template enables to add Labels widget for blogger but customization in different animated styles not available. But here BlogTariff presents beautiful Labels widget based on 3D jQuery effect for blogger.
This is not a Tag Cloud Widget for categories more than that where webmaster can add it on sidebar or any where in the template to attract the visitors/readers to browse their choice category topics.
Webmasters don’t need to work hard for adding this widget BlogTariff educate you in simple way to install. Let’s begin the tutorials.
Before do implement on your blog you may like to view Author Demo

Live Demo

Step1:

How to Add Rotating Cloud Menu for blogger?

Sign into your blogger account
Click on “EDIT HTML” link tab
Now, search for code tag

</head>

After find the code tag copy the below code and paste above to it

<style type="text/css" media="screen">
      #list{
        margin:0 auto;
        height:200px;
        width:200px;
        overflow:hidden;
        position:relative;
        background-color: #fff;}
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;}
    #list a{
        position:absolute;
        text-decoration: none;
        color:#222;
        font-size:20px;}
    #list a:hover{
        color:#ccc;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='http://blogtariff.googlecode.com/files/Cloud.js' type='text/javascript'/>

After successful pasting the above code “Save the Template”

Customization

• You can replace, Background, font color, hover color, with your choice colors by using of Color code chart

Step 2
Now Click “Design” (Layout in the new blogger interface) Page Element link tab
Click on “Add a Gadget” tag widget
Now Select “HTML/Javascript” widget and copy the below code paste in it

<div id="list">
    <ul>
        <li><a href="#">Ajax</a></li>
        <li><a href="#">Css</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Firefox</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Html</a></li>
        <li><a href="#">Chrome</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Safari</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="http://www.blogtariff.com/">AddThis</a></li>
  
    </ul>
</div>

Customization

• Replace “#” with your Label links or post links by adding simple Category Name to it.

After successful alter now “Save the widget” and Template to preview blog.