Add Colourful Spinny leaf Navigation Menu Bar

0 /

Also Read

Add Colourful Spinny leaf  Navigation Menu Bar For Blogger

How To Add Colourful Spinny leaf  Navigation Menu Bar For Blogger

1. Log in to blogger account
2. Now select Template
3. Now Click EDIT HTML Button
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
nav {   width: 900px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
.top-menu li:hover {
        margin: 30px 20px;
.top-menu li:active {
        margin: 30px 33px;
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
.top-menu li:active a {
        font-size: 26px;
        top: 30px;
        text-shadow: none;
.top-menu li {
        width: 100px;
        height: 100px;
        display: block;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-border-top-left-radius: 100px;
        -webkit-border-bottom-right-radius: 100px;
        -moz-border-radius-topleft: 100px;
        -moz-border-radius-bottomright: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
.top-menu li:hover{
        -webkit-border-top-left-radius: 80px;
        -webkit-border-bottom-right-radius: 80px;
        -moz-border-radius-topleft: 80px;
        -moz-border-radius-bottomright: 80px;
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
                -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
.top-menu li:active{
        -webkit-border-top-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
6. Now Find this code by using Ctrl+F <div id='content-wrapper'>
7. Paste below code Before <div id='content-wrapper'>
  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Download</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>Links</a><div class="menu-item" id="price"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
 *Change All # With Your Links.

8. Now save your HTML/Javascript',Done!

If you have any query regarding Beautiful Colorful Spinny Leaf  Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.

how to Add Colourful Spinny leaf Navigation Menu Bar into for blogger blogspot,spining effect red,green,orange hover effect css3 html leaf menu bar



Post a comment Blogger Disqus

0 Comments on "Add Colourful Spinny leaf Navigation Menu Bar" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand