Lazy CSS Menu Bar For Blogger Blog

Stylish menu bars can make your blog's look more attractive. Now, its not hard to find lazy CSS menu bar for your blogger blog. We're sharing awesome menu in this tutorial for all of you. In this menu you'll see five buttons: Home, About, Blogs, Works and Contact. Keep in mind, you can't change menu title, because it's an image based menu.

If you want to change the name according to your choice then you have to edit the image. You can see screenshot and live demo below. Let's start the tutorial:

You  May Like To Read:

• CSS3 Smooth Vertical Menu For Blogger Blog
• Create Drop Down Dark Style Menu In Blogger Blog
• Multi Color CSS3 Navigation Menu For Blogger Blog

Live Demo

How To Add Lazy CSS Menu Bar For Blogger Blog

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

/*Menu Starts BlogsDaddy.com */
.blogsdaddy-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.blogsdaddy-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.blogsdaddy-nav ul li {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPgRK9orfo06177ge9NBgdDpSTXYNgWj4woUKTFC-yCRyplvU2UuVI7ePXnEMFAslHSIgE2fA44K223_E3cplXyxlt5T6Q2wvk8UCeNdjaxyie-0dqvbFkWIPFAn0CZabfD9mGtq2mChg7/s1600/BlogsDaddy-Lazy-Menu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.blogsdaddy-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.blogsdaddy-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.blogsdaddy-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.blogsdaddy-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.blogsdaddy-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.blogsdaddy-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.blogsdaddy-nav ul li:hover {
    z-index:1000; }
.blogsdaddy-nav ul li.sm1:hover {
    background-position:0 -75px; }
.blogsdaddy-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.blogsdaddy-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.blogsdaddy-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.blogsdaddy-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BlogsDaddy.com */

• Now, Save Your Blogger Template

You have finished the half part of this tutorial, now come to next part and add html mark-up of this menu on your layout.

• Go To Blogger Dashboard >> Layout >> Add A Gadget >> HTML/JavaScript
• Paste The Following Code Inside HTML/JavaScript

<div class="blogsdaddy-nav">
<ul>
<li class="sm1"><a href="http://www.blogsdaddy.com"></a></li>
<li class="sm2"><a href="http://www.blogsdaddy.com"></a></li>
<li class="sm3"><a href="http://www.blogsdaddy.com"></a></li>
<li class="sm4"><a href="http://www.blogsdaddy.com"></a></li>
<li class="sm5"><a href="http://www.blogsdaddy.com"></a></li>
</ul>
</div>

Remember Notes: Replace All Links Highlighted In Yellow Color With Your Own Links and Save It

If you want to ask anything related to this menu bar tutorial. Then drop your comments below. More any suggestions join conversation. Best Wishes :)

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.