17 Add Navigation Bar (Menu bar HTML, Navigation Menu) For Blogspot

This option is not provided by blogger "Pages" Gadget. If you want to put different URLs to your menu you can either add link list gadget and place it at the place where the menus should be or you can edit the HTML and add the "Menus" gadget. But the two methods give you totally different results. Because the selected items will not be highlighted in "link list" gadget. But "Menus" gadget will highlight. So my personal opinion is to add "Menu" gadget rather than inserting the "Link List". Anyway selection is up to you.



In this post I am going to show you how to make a "menu" gadget for your Blogger blog page. Let's get started,

First of all make sure to save your blogger blog template. For this go to your "Dashboard" then click on "Design", and then select "Edit HTML". Then click on "Download full template".


After that select "Page elements" and you will go to "page elements". Here you should delete the "pages" gadget if you already have it. If not or after removing the gadget just go back to "Edit HTML". There you should put a tick to "Expand Widget Templates". It will reload your HTML codes.



Now find the following code,



<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>


Then replace the above code by following code,

<b:widget id='LinkList431' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
   <ul>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <li class='selected'>
     <a expr:href='data:blog.homepageUrl'>Home</a>
     </li>
     <b:else/>
     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
     </b:if>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url == data:link.target'>
       <li class='selected'>
       <a expr:href='data:link.target'><data:link.name/></a>
       </li>
       <b:else/>
       <li><a expr:href='data:link.target'><data:link.name/></a>
       </li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Now go to the bottom of the page and click on "SAVE TEMPLATE". Now you are at the end of the process. This is the time to select "Page Elements" tab at the left upper  part of the page. Then you will see a gadget called "MENU" inside your page elements. At the right bottom corner of that gadget you will see a mark called "Edit".  Select it. Following window will appear.

Then add Urls to the "New site URL", and add the name that you want to display on your menu in to "New Site Name"

Save it and view your blog. That's all. Now you can add more and more web addresses to your menu.



If you want to add your "pages" to your gadget follow the procedure below,


select "POSTING" ---> "EDIT PAGES"


Then click "VIEW" on the page you want to add to your menu gadget. Copy the address of the page from the address bar. Then paste it in the "New Site Url" in the menu gadget. Thats all.

If you faced any problem during the process, sent it here, I'll glad to help you.