Ribbon Style Hover Effect Menu Bar For Blogger Blog

After lazy CSS and Apply style menu bar now I'm going to share how to add modern ribbon style menu bar to your blogger blog. This menu bar is unique and most attractive. With easy steps you can put this menu bar on your blog. Below you can check demo and screenshot before adding this widget.

After few days, you'll get more stylish menu bar and other widgets from our Blogs Daddy blog. So, let's follow given below steps and add this beautiful menu bar on your blog.


Live Demo

How To Add Ribbon Style Hover Effect Menu Bar

• Go To Blogger Dashboard >> Template >> Edit HTML >> Find ]]></b:skin>
• Just Above ]]></b:skin> Paste Given Below Code

/* The CSS Code blogsdaddy.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;

}

• Save Your Blogger Template and Follow Next Steps
• Go To Blogger Dashboard >> Layout >> Add A Gadget >> HTML/JavaScript
• Paste The Following Code Inside HTML/JavaScript

<div class='ribbon'>
    <a href='Your URL Here'><span>Home</span></a>
    <a href='Your URL Here'><span>About Us</span></a>
    <a href='Your URL Here'><span>Tricks</span></a>
    <a href='Your URL Here'><span>Make Money</span></a>
    <a href='Your URL Here'><span>Widgets</span></a>
    <a href='Your URL Here'><span>Advertise</span></a>
    <a href='Your URL Here'><span>Contact</span></a>
</div>

Customization:

• Replace Yellow Color Highlighted Text With Your Links
• Replace Pink Color Highlighted Text With Your Titles

Now Save your HTML/JavaScript gadgets and visit your blog. Any question in mind? Ask via comments. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.