GAIN KNOWLEDGE


TOP 10Z
This explains you about
top 10z in the world
ENGG NOTES
This holds engineering notes
for cse students
BLOGGER TRICKS
This tricks is used to improve
the website of blogger
SONGS
Hear the latest song
from the website
SOFTWARE
Get the latest technology
software and install it
APTITUDE PUZZLES
Here is aptitude puzzle
for you learn and gain


Ads by Admin

Sunday, June 9, 2013

DROPDOWN LIST LAVA LAMP

In  this  post,  im  gonna  explain,   how  to  add attractive Css3  lava-lamp drop   down menu bar for your blog.Menu bar helps  you to make your blog  attractive  and keep linking to main pages with   page  name
The credit goes to the blogger tricks which is the wonderful site i have everseen













Demo 

1. Log in to blogger account and Click drop down. 
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
    
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* Flying Css3 menu www.gowti93.blogspot.com*/

.container {
    
    margin: 30px auto;
    width: 957px;}

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;}
#nav {
    background: url('http://2.bp.blogspot.com/-IoZ9tMxpD5s/UNLbVedz72I/AAAAAAAAF-4/0g2hRnNXf1c/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('http://4.bp.blogspot.com/-z53mWkvYJ0I/UNLbWUXvTMI/AAAAAAAAF_E/yb9T2LCiNg8/s1600/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);}
#nav ul li {
    background: none;
    width: 100%;}
#nav ul li a {
    float: none;}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;}
#lavalamp {
    background: url('http://2.bp.blogspot.com/-LtelbnLnk1g/UNLbUnweBaI/AAAAAAAAF-0/VzvjkJt3wlo/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
    left: 565px;
}

7. Go to blogger and click Layout 

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="container">

            <ul id="nav">
                <li><a href="http://www.bloggertrix.com/">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="www.gowti93.blogspot.com">Back</a></li>
                <div id="lavalamp"></div>
            </ul>

        </div>
Replace Title and links.
10. Now save your HTML/Javascript'.

No comments:

Post a Comment

Blogger Wordpress Tips -- Scroll to Top Plugin for Blogger by www.allbloggertricks.com-->