Advance Menu Ribbon With Hover Effect

This widget need not to be over emphasized, keep your blog layout neat and simple with advance menu ribbon. This is a css based widget that works with every blogger template, even in dynamic view. No technical skills is required just follow my step to step guide below.

Click here to view our lists of widgets.

1. Log in to blogger account and Click drop down.

2. Now select “Template” Like Below.

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 just above ]]></b:skin>  

/* The CSS Code for the menu starts here eobasi.obasimvilla.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;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select ‘HTML/Javascript

9. 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='https://www.ewtnet.com/'><span>Contact</span></a>
</div>

Replace # with your links.

10. Now save your HTML/Javascript’.

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Leave a Reply