Horizontal Navigation Menu Links For Blogger

Horizontal Navigation Menu Links For Blogger:-This is very important hack for bloggers as we need to create a top menu of links with our important blog links to important pages making the navigation in your blog very easy for your readers.As i have also explained an easy way before to add top menu links to blogger but some would have not liked the styled of that navigational menu links.So i will be giving a tutorial to add beautiful top menu links of which you can change colors also easily from css.The installation is simple not much difficult.I hope you will do it easily.

You can see the the menu ,how they will look after adding from below image.How to add these top navigational links below blogger header:-

Just Go To Layout > Edit Html

And Search For </b:skin>

Now add these below Css codes before it-

/* —– LINKBAR —– */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Please edit the width of the above codes in red to adjust to the width of the navigation menu to adjust it to yours template width.You can change the color and design of above css also if you are capable of it.

Now Search for below codes-

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Testing templates (Header)’ type=’Header’/>
</b:section>
</div>

And add the below codes after the above codes:-

<div id=’bg_nav’>
<div id=’navleft’>
<div id=’nav’>
<ul>
<li><a href=’/’>home</a></li>
<li><a href=’#’>Widgets</a></li>
<li><a href=’#’>Hacks</a></li>
<li><a href=’#’> Tutorials</a></li>
<li><a href=’#’>Templates</a></li>
<li><a href=’#’>Contact</a></li>
</ul>
</div>
</div>
</div>

Thats It Now Preview It.If its working fine just save your template.

Change the # above with links to yours.I hope you would like this navigation menu for sure.I will be back with one more great navigation link bar menu for sure ,uptil then enjoy this.

129 Comments

  1. Dhadha January 15, 2009
  2. Anonymous February 21, 2009
  3. DM February 21, 2009
  4. I Am Boymom March 7, 2009
  5. Anshul March 7, 2009
  6. It's Me! Boymom! March 7, 2009
  7. emily w. March 9, 2009
  8. Anshul March 10, 2009
  9. Saurav Kataruka March 15, 2009
  10. Anshul March 16, 2009
  11. BloggerGoBlog April 8, 2009
  12. Anshul April 8, 2009
  13. os3s21 April 8, 2009
  14. Anshul April 9, 2009
  15. os3s21 April 9, 2009
  16. Madz April 14, 2009
  17. Anshul April 14, 2009
  18. Madz April 15, 2009
  19. Brence April 15, 2009
  20. Madz April 15, 2009
  21. Kelli April 15, 2009
  22. Anshul April 15, 2009
  23. Myth April 18, 2009
  24. News Around The Blogs April 28, 2009
  25. Anshul April 28, 2009
  26. Gohergeous! April 29, 2009
  27. John"Spanky"Stokes May 1, 2009
  28. John"Spanky"Stokes May 1, 2009
  29. Anshul May 1, 2009
  30. rachel May 3, 2009
  31. rachael May 3, 2009
  32. Anshul May 3, 2009
  33. rachael May 3, 2009
  34. The Krew May 13, 2009
  35. Anonymous May 18, 2009
  36. Anshul May 18, 2009
  37. Braids4Gro May 23, 2009
  38. Anshul May 23, 2009
  39. Handz June 7, 2009
  40. Sasha Ricci June 14, 2009
  41. Sudeep June 19, 2009
  42. Katelyn and Matt June 21, 2009
  43. Anshul June 21, 2009
  44. Peter Larson June 22, 2009
  45. TKP July 11, 2009
  46. TKP July 11, 2009
  47. Anshul July 12, 2009
  48. Wing July 14, 2009
  49. YBC July 21, 2009
  50. Nisar August 8, 2009
  51. shoshana September 4, 2009
  52. Anshul September 4, 2009
  53. Constantin September 5, 2009
  54. Anja Atkinson September 11, 2009
  55. ecreditloans September 20, 2009
  56. Quick September 27, 2009
  57. Eryn October 26, 2009
  58. babyrocasmama November 20, 2009
  59. Melissa November 23, 2009
  60. Anshul November 24, 2009
  61. The Curious Pug December 11, 2009
  62. Anshul December 12, 2009
  63. Brian Hasbrouck December 22, 2009
  64. The Blackraven December 30, 2009
  65. Anshul December 31, 2009
  66. Didda January 2, 2010
  67. Jennie January 3, 2010
  68. Jennie January 3, 2010
  69. Anshul January 4, 2010
  70. Selamburb January 8, 2010
  71. Katie January 18, 2010
  72. Anshul January 18, 2010
  73. Marsha February 22, 2010
  74. Anshul February 23, 2010
  75. LeoCW February 24, 2010
  76. Anshul February 24, 2010
  77. LeoCW February 24, 2010
  78. Anshul February 24, 2010
  79. Tanuj March 2, 2010
  80. Anshul March 2, 2010
  81. DESAR LANOD March 8, 2010
  82. Homemade Mom March 18, 2010
  83. - Admin - March 18, 2010
  84. Anshul March 19, 2010
  85. Arham Sukardi May 15, 2010
  86. Arham Sukardi May 15, 2010
  87. Anshul May 15, 2010
  88. Arham Sukardi May 16, 2010
  89. Lucho May 20, 2010
  90. The Girl Creative May 25, 2010
  91. Anshul May 26, 2010
  92. FiLm 'izLe' May 31, 2010
  93. Homemade Mom June 6, 2010
  94. Anshul June 8, 2010
  95. yahaya June 8, 2010
  96. Homemade Mom June 8, 2010
  97. Anshul June 9, 2010
  98. Homemade Mom June 9, 2010
  99. Anshul June 9, 2010
  100. Varsha Vipins June 9, 2010
  101. Anshul June 10, 2010
  102. Homemade Mom June 12, 2010
  103. Anshul June 12, 2010
  104. Homemade Mom June 12, 2010
  105. Anshul June 12, 2010
  106. Homemade Mom June 12, 2010
  107. Anshul June 12, 2010
  108. Sherie July 13, 2010
  109. Ron Dy July 22, 2010
  110. Anshul July 24, 2010
  111. Lacey July 25, 2010
  112. Anshul July 26, 2010
  113. Pakialamero August 10, 2010
  114. Anshul August 11, 2010
  115. Anshul August 12, 2010
  116. Christina August 13, 2010
  117. Christina August 13, 2010
  118. Anshul August 13, 2010
  119. pugoworkz September 8, 2010
  120. Anshul September 9, 2010
  121. Deb September 19, 2010
  122. Anshul September 25, 2010
  123. Haron Bashier Didaagun November 10, 2010
  124. Hemu May 16, 2011
  125. chicinnovative June 14, 2011
  126. Me June 29, 2011

Leave a Reply