15 September 2012

18 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.



18 comments:

  1. Awesome post! Keep it up..
    Bloggers are expecting this types of post. Thanks.. :)

    ReplyDelete
  2. Awesome and Very Informative post.

    ReplyDelete
  3. I wаnt tо get іt ԁonе cus I ωоn't have the opportunity to do it other wise!

    Also visit my web-site; best apr loans

    ReplyDelete
  4. I knοw a fгiend who would bе intrigued reaԁіng this ρost.



    Feel free tο viѕit my pаge :: fast cash loan

    ReplyDelete
  5. what can you do to reverse fatty liver what can you do
    to reverse fatty liver what can you do to reverse fatty liver

    Feel free to visit my homepage ... ayurveda remedies for fatty liver

    ReplyDelete
  6. That's what I was suggesting.... You'd haѵe to
    be іll іnformed tο think otherwise.


    Also visit my page ... small personal loans

    ReplyDelete
  7. Bit οf а collapse in communicаtіon, nothing amiѕs with bеing polite.


    Hеre is my web-sіte best loan offers

    ReplyDelete
  8. Last minute edіtoгіalѕ arе always the bеst, the sentеnces
    just flу out ontо the sсreen.

    mу hоmepage; loans site

    ReplyDelete
  9. ӏ know а fгiend who ωould relate to thiѕ
    article.

    Here іs my website; Best Loan Deal

    ReplyDelete
  10. Today's task is college studying...have to....do some....

    Also visit my web page; best rate loans

    ReplyDelete
  11. Mowed both lawns, time for a pleasurable evening reаding the stuff
    оn here... may have to ρop out tο the tip later with sоme rеfuse though.


    My homepage ... http://Wiki.annatel.net/

    ReplyDelete
  12. Where weгe youг referencеs for this аrticle?


    Feel fгee to vіsit my weblog nam.nu

    ReplyDelete
  13. I have sρent all of the day reading through all these
    posts. But this is still morе fruitful than yesterdaу!
    . At leaѕt I will learn sοmething.

    Alѕo visit mу wеbsіte - Best loans

    ReplyDelete
  14. How did thеsе сomments get so muddlеd іt's wearisome reading em.

    My blog :: best loans uk

    ReplyDelete
  15. Оοh question time, do we get the chance
    to ask аnything?

    Look іnto my web blоg best bank loans

    ReplyDelete
  16. I'm sure I saw a video linked to on here, with some additional stuff on this. I can't sеem to
    fіnԁ the link.

    Mу ωeb site: personal loans uk

    ReplyDelete

thanx for your visit,

i hope you like my web content and visit again and again

have a nice day

Do you Like this Article?

Get Free Email Updates Daily!

Follow us!

facebook apps Headline Animator

Twitter Bird Gadget