3D jQuery Cloud Menu List For Blogger

Oleh Unknown

8 Ağustos 2012 Çarşamba

Bagikan :

Tweet

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.

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 Design >  Page 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...

Tag : Animation, CSS, Java Script, JQuery, Links