Add Ribbon Style Hover Effect Navigation Menu Bar

How To Add Ribbon Style Hover Effect 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>

/* CSS Code starts here bloggersstand.blogspot.com */
.ribbon span {
    background:#A81B6A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
 
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}
.ribbon:before {
    border-left-color:transparent;
}

6. Go to blogger and click Layout
7. Click Add Gadget and select HTML/Javascript
8. Paste below code

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Download</span></a>
    <a href='#'><span>Css3</span></a>
    <a href='#'><span>HTML</span></a>
    <a href='#'><span>MySQL</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

 *Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!