Yummy Horizontal Menu for Blogger with hover effect

In the earlier posts here discussed about various type of menus in vertical and horizontal forms. Now again here in this article BlogTariff presents adds another spicy “Yummy Menu” for adding to blogs/websites. This menu is basically coded with CSS style and colored in chocolate and decently this menu attracts visitors/readers to browse more contents on blog/websites.

Yummy menu bar styled with hover effect, webmasters don’t need to work hard for adding this CSS and HTML form code to their blog/websites. Its easy to install on any type of blogs. Let’s begin the tutorial for “Yummy Menu”.

How to install “Yummy” Horizontal menu?

Step One:-
Sing into your blogger account
Click on “Template” link tab
Click on “Edit HTML” link tab and Proceed
Now search for code

]]></b:skin>

• After finding code copy the below code and paste below to it

/* BlogTariff CSS Code for the Yummy Menu starts*/
#menu10 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
   
}
#menu10 ul li{
    float:left;
border:1px solid #5F3B2F;
}
#menu10 ul li a{
    display:block;
    text-decoration:none;
   
    background-color:#955542;
    width:170px;
    text-align:center;
}
#menu10 ul li a span{
    display:block;
}
#menu10 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2em;
    color:#fff;
    border:1px dashed #fff;
    padding-bottom:3px;
    background-color:#AF6C57;
}
#menu10 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#5F3B2F;
    visibility:hidden;
    border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}

After successful adding code now “Save Template”
Step Two:-
Go and Click on “Layout” link tab
Click on “HTML/Javascript” link widget
Copy the below code and paste in it

<div id="menu10">
            <ul>
                <li><a href="http://www.blogtariff.com/">
                        <span class="title">Home</span>
                        <span class="text">Back to Home</span>
                    </a>
                </li>
                <li><a href="http://www.blogtariff.com/">
                        <span class="title">Download</span>
                        <span class="text">Watch out</span>
                    </a>
                </li>
                <li><a href="http://www.blogtariff.com/">
                        <span class="title">About</span>
                        <span class="text">Find out</span>
                    </a>
                </li>
                <li><a href="http://www.blogtariff.com/">
                        <span class="title">Contact</span>
                        <span class="text">Share with Us</span>
                    </a>
                </li>
            </ul>
        </div>

Customization:-

Replace "http://www.blogtariff.com/" with your page or posts URLs
After successful pasting the above code “Save the Widget”

Authors Desk:-

If you've really enjoyed our article then share your views and suggestion via comments and don't forget to like our Facebook  Page and Follow us on Twitter.