Add Horizontal Menu Bar in Blogger

Add Horizontal Menu Bar in Blogger

23 Comments , , Edit
Making Your Blog Simple and navigative grow the love of readers and visitors.Actually the Horizontal Menu Bar is an awesome bar which can be placed at the top of Blog or below header Section,which will certainly helps the readers to easily navigate,contact,and explore your blog contents.In this regards,here is a cool Horizontal menu bar (Black Style) which can make your blog navigative and friendly.

How To Add Horizontal Menu Bar in Blogger

  • Now Search for ]]></b:skin>
  • Copy and paste the below script above ]]></b:skin>

#Wrapper_Nav{background:#111; height:35px;}
.Top_Menu{margin:0 auto; width:960px}
.Menu a{color:#fff; display:block; padding:4px 7px;text-decoration:none}
.Menu a:hover{background:#f4f4f4; color:#333; display:block}
.Menu ul{list-style:none; margin:5px 0}
.Menu li{float:left; height:25px}
.Menu{float:left; height:35px; width:960px}

  • Now Search for <body>
  • Now Copy The Below Script and add it below <body> tag

<div id="Wrapper_Nav">
<div class="Top_Menu">
<nav class="Menu">
<ul>
<li><a href="#">Home Tab</a></li>
<li><a href="#" rel="author">About You Text</a></li>
<li><a href="#">Contact Text</a></li>
<li><a href="#">Forum Site</a></li>
<li><a href="#">Advertise Money</a></li>
<li><a href="#">Guest Post</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Privacy Policy Of Your Blog</a></li>
<li><a href="#">Disclaimer Text</a></li>
</ul>
</nav>
</div>
</div>

  • Replace # with the specific links you want to redirect,also change the text to your desired text.
  • Note :- If you are interested in adding more menus,simply add "<li><a href="#">Text</a></li> b/w <ul> and </ul>
  • Save Your Template
  • That's it !
So What's Up:- Actually this menu bar will make your Blog navigative to the readers,they can explore your blog contents easily by clicking the labels,Share your ideas with us,stay Blessed,Happy Blogging !


SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

23 comments:

  1. Ankit SinglaJune 1, 2013 at 12:51 PM

    It's fantastic horizontal menus. I never seen such a stylish menus before. Thanks a lot dear for your hard work. Keep blogging forever.

    ReplyDelete
    Replies
    1. Iftikhar uddinJune 3, 2013 at 2:40 AM

      Thanks for the great comments,You are really welcome here !
      Do Visit Again !
      Ifti!

      Delete
  2. Iftikhar uddinJune 4, 2013 at 12:31 AM

    Search for that and that's it !
    IfTI!

    ReplyDelete
  3. Anggavisca.blogspot.comJune 4, 2013 at 8:33 AM

    thankyou, verry usefull!! please visit :)

    anggavisca.blogspot.com

    ReplyDelete
  4. Aleks KosJuly 24, 2013 at 11:09 AM

    Thanks for the interesting menu.
    I used the menu on my blog but it is at the top of the page. What to do with this problem
    http://8-ball-pool-games-multiplayer.blogspot.com

    ReplyDelete
  5. Aalina EdenAugust 5, 2013 at 3:36 AM

    i m unable to find body tag. this trick is not working.

    ReplyDelete
  6. Secret ObsessionOctober 12, 2013 at 5:11 AM

    Thank you for sharing! But I have this one problem. It works fine on my test blog but doesnt on my main blog.What could be the problem?

    ReplyDelete
    Replies
    1. Iftikhar uddinOctober 13, 2013 at 1:05 AM

      It works perfectly follow the above steps correctly :)
      Regards,
      Ifti!

      Delete
  7. BLOG TARIFFNovember 6, 2013 at 10:33 AM

    First of all your i would like appreciate your efforts and way of presenting tutorials....very good..

    ReplyDelete
  8. BikiranNovember 28, 2013 at 1:08 AM

    hello bro, Please reply me fast ok..
    If we want to add drop down menue to some of them then...
    http://myblogbikiran.blogspot.com/2013/11/how-to-add-stylish-facebook-like-box-to-blogger.html

    ReplyDelete
  9. UnknownJanuary 18, 2014 at 7:37 AM

    what is "#" Link

    ReplyDelete
  10. UnknownMarch 1, 2014 at 1:31 AM

    what is # link plzz replyy

    ReplyDelete
  11. UnknownMarch 24, 2014 at 2:34 AM

    pls help me i couldnt find <#body#> in html..

    ReplyDelete
  12. MNKSeptember 9, 2014 at 10:46 PM

    very nice horizontal menu bar
    http://meraustaad.blogspot.com/

    ReplyDelete
  13. ArjunNovember 10, 2014 at 7:39 AM

    Thanks Ifti for this, I have just added to my blog http://mintlyrics.blogspot.com, but i face problem in searching body, i read another guide at pageword and added it successfully
    Thanks for this beautiful Menu bar

    ReplyDelete
  14. Vedam Shanmukha HrushikeshFebruary 22, 2015 at 9:41 PM

    thanx

    ReplyDelete
  15. kiranFebruary 23, 2015 at 9:36 AM

    how to link the menus to pages, i can not , i dont have linking option

    ReplyDelete
  16. UnknownMarch 13, 2015 at 2:28 AM

    thnx for the tip... created top menu check my blog http://lumiasnapz.blogspot.in/

    ReplyDelete
  17. Vemuri RajaMay 12, 2015 at 11:24 PM

    thanks
    Get Paid Taking Pictures is great for hobby photographers. possible to money taking pictures. http://bit.ly/1HeURfj

    ReplyDelete
  18. UnknownOctober 3, 2015 at 10:05 AM

    couldnt find a search box

    ReplyDelete
  19. UnknownOctober 3, 2015 at 10:07 AM

    couldnt find a search box

    ReplyDelete

Subscribe to: Post Comments ( Atom )