Saturday, January 26, 2013

Lazy CSS Menu Bar For Blogger Blog

Author: Gagan Masoun
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:
Lazy CSS Menu Bar 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
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.

3 comments:

  1. Hi bro this is really nice. After hard work for 7 days I have finally fixed my template. Now I have to work for my Demo Site. I know you are using demo from specific site. I won't mention for your privacy. I have already applied your demo site code in my demo site also. Now kindly tell me How to make a new post? Should I go for new Post directly or I have to edit HTML...Please email me at bloggerspicebd@gmail.com.....Hope your quick reply.

    Regards

    Mohammad Fazle Rabbi
    Blogger Spice

    ReplyDelete