Wednesday, August 8, 2012

3D jQuery Cloud Menu List For Blogger

This is also cool effect fir your blogger. You can link to any pages with this gadget. Actually its rotating effect. This is not a Tag Cloud Widget for Categories, you can add this to your sidebar. I include demo, check it below Follow this easy steps to add it to your blog.

3D-Cloud \-menu

DEMO

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   </head>

3. Paste below code Before </head> tag

<style type="text/css" media="screen">
      #list{
        margin:0 auto;
        height:200px;
        width:200px;
        overflow:hidden;
        position:relative;
        background-color: #000;}
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;}
    #list a{
        position:absolute;
        text-decoration: none;
        color:#666;
        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://bloggertrix.googlecode.com/files/cloud2.js' type='text/javascript'/>
* You can change Background color by changing #000  color code.
    Use One of this for get a color code.

Hex color Generator for Blogger
Hex Color Generator for Blogger Part 2

4. Now Go to DesignPage Element.

5.Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<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.bloggertrix.com/">Add This</a></li>
   
    </ul>
</div>

Replace # with your Links
Replace Links name with your any name.

7. Now save your HTML/Javascript'.

    You are done...

3 comments:

  1. hey its too fast how to reduce speed of it?

    ReplyDelete
  2. @Hardi Patel
    Its depend on moving your courser.
    however i reduced the speed.So,you can do the 3rd step again. :)

    ReplyDelete
  3. Please tell me how to reduce the speed???

    ReplyDelete