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 */6. Go to blogger and click Layout
.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;
}
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
<div class='ribbon'>*Change All # With Your Links.
<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>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Cool Add Ribbon Style Hover Effect Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.