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 !
Komentar Terbaru