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
- Go To Blogger Dashboard
- Now Click on Template and then Edit HTML
- 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 !
I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.
It's fantastic horizontal menus. I never seen such a stylish menus before. Thanks a lot dear for your hard work. Keep blogging forever.
ReplyDeleteThanks for the great comments,You are really welcome here !
DeleteDo Visit Again !
Ifti!
i didn't find ]]>
ReplyDeleteSearch for that and that's it !
DeleteIfTI!
thankyou, verry usefull!! please visit :)
ReplyDeleteanggavisca.blogspot.com
Thanks For Stopping By !
DeleteIftI!
Thanks for the interesting menu.
ReplyDeleteI 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
i m unable to find body tag. this trick is not working.
ReplyDeleteSearch Like This <body
DeleteThank 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?
ReplyDeleteIt works perfectly follow the above steps correctly :)
DeleteRegards,
Ifti!
First of all your i would like appreciate your efforts and way of presenting tutorials....very good..
ReplyDeletehello bro, Please reply me fast ok..
ReplyDeleteIf 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
what is "#" Link
ReplyDeletewhat is # link plzz replyy
ReplyDeletepls help me i couldnt find <#body#> in html..
ReplyDeletevery nice horizontal menu bar
ReplyDeletehttp://meraustaad.blogspot.com/
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
ReplyDeleteThanks for this beautiful Menu bar
thanx
ReplyDeletehow to link the menus to pages, i can not , i dont have linking option
ReplyDeletethnx for the tip... created top menu check my blog http://lumiasnapz.blogspot.in/
ReplyDeletethanks
ReplyDeleteGet Paid Taking Pictures is great for hobby photographers. possible to money taking pictures. http://bit.ly/1HeURfj
couldnt find a search box
ReplyDeletecouldnt find a search box
ReplyDelete