Add Attractive Navigation menu to Blogger/Blogspot. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

New blogger want to design your blog but they have no idea how to design blog, and navigation menu is show your blog as a website how to add this to your blog and what is code to add to your blog template learn and add this code your blogger template and enjoy navigation menu tips on your blog today.

I am telling you about Horizontal” Navigation Menu add this to your blogger left sidebar to show your blog as a website read below some step to add this navigation menu to your add on your blog today.

Follow below step to add this on your blogger..........

* Go to your blogger Dashboard.

* Click on Design tab .

*Now Click on 'Add a Gadget' on the sidebar.

* After open new window select HTML/Javascript.

*When open a box copy below code and paste it into the box.

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb23GE6lecs0HAbYRi2nSF_R5iH9Q_UhHHfbW_avZpwvPDUmjsBSIT2Py2-nQtUuLWpmTFfEEFjYAGh7XLLDJ_JYFR0MhcIn416SgANnVxcnrKOiVmf7m66xNDi1Kwwu40FZ81GiiYMCE/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgynhepvbWh41FspkeMsWIIxYEQauuS5232dvbGDMCSuIvpsyXhmk2Cno49ehCaLKOTdt2bdzHNcINUnjzfMFczBjET9y-MTj6FN6gF4NLO-aXPBh5yJVBCynWWZhEgdIQyIAjni_9hBG0/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Note: Replace the hash (#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles.

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

* Now Save your javascript and you are DONE.