Replace Page List Menu Gadget with a Link List

The Default Blogger Templates(which can be customized using the Designer) are all made to use the “Blog Pages” as your Blog’s Top Navigation Menu. This is done using a Page List Gadget. But , you might want to setup your own menu with Custom Links. In that  case, you can replace the Page List Gadget with a  Link List. This tutorial guides you on how you can replace the Page List with a Link List without loosing the Menu Styling(and the highlighted active links)..

How do i add non-page links to my Menu

This is a frequently asked question on the Blogger Help Forum. The solution is simple, if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of using a Page List. If you are using one of the Default Blogger Templates, and if you have added a Page List Gadget below the header, you will be using "Page" links as the Navigation Menu. To change this to a Link list, follow these simple steps.

1. Login to your Blogger Account and navigate to the Design > Edit HTML tab. Do NOT check the “Expand Widget Templates” Option.

2. Now look for(Ctrl + F)

<b:widget id='PageList

and you will find some line  like

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

3. Replace this line by the following Code

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content PageList'>
   <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>

4. Save the Template.

5. Now you can manually add links to the Menu by using the Quick Edit Wrench Button .

 

The Styling of the Gadget will be preserved and the Active links will be highlighted.

68 comments :

  1. Generally <b:widget id='PageList doesn't exists in most of the templates. What should we do in that case. Does it requires any precondition to apply this code into our templates?

    ReplyDelete
  2. @Shaiksoft - this is applicable only to those templates which already have a Styled Page List gadget. (this is the case with templates designed using the "Blogger Template Designer").Template Designers can make use of the b:if conditions present in the above code to highlight the active links. they can assign a css class to the active link and style it.

    btw do you know that there is something known as copyright? You have ripped my blog theme and you are using it on your blog. I had got this theme designed exclusively for me by a PSD designer. you are not allowed to use it on your blogs. Respect the copyrights dude. hope that you will :)..

    ReplyDelete
  3. You are right Aneesh!

    Your template has been ripped by me. But don't worry friend I'm doing some RNDs around templates & Photoshop. Soon, in couple of days, I will change these.

    I do respect the copyright. Thanks friend!!!

    ReplyDelete
  4. Is there any way to customize the page links to make them look more like buttons instead of just common text?

    For an example check out my blog at http://www.wikzo.com

    ReplyDelete
  5. Great stuff! Already applied it to my blog. I was wondering, though, if there is a way, now, to get the links to open in a new tab or window?

    ReplyDelete
  6. @Jared and Jessica - getting all links open in new tab won't be too good for the readers :). but i see that most of the links on your blog.. if you want to open the menu links in a new tab, then you can add target='_blank' to the the above code.
    i.e.
    change all <a expr:href to <a target='_blank' expr:href

    ReplyDelete
  7. Great! Thanks again for your work.

    ReplyDelete
  8. I was happy with the Page List Menu Gadget, but wanted to add to it. I have a number of pages as part of another website that I wanted to have links to on my blog, in the same style as the Page List Menu Gadget. This list view does the trick beautifully! Thanks! I learn so much from you Anessh!

    ReplyDelete
  9. Hi,

    I already have few pages, I just need to add follow on twitter, facebook and rss links (with buttons) to this. Can you tell me how this can be done easily.

    ReplyDelete
  10. You have given another complaint against my blogs right?
    I already told that I'm going to change my template soon, I was about to change. You did not believe me.

    That's ok its happens in India. Good Bye.

    ReplyDelete
  11. @Shaiksoft - i haven't given anymore complaints after you left that comment on my blog.i complained once, and you reposted everything after the content got removed. So i had to complain once again.this was done before you commented on my blog.(the complaints take a week or two to get processed)

    ReplyDelete
  12. @Shaiksoft - and i didn't understand the part "it happens in India". its not something where i have done something wrong. I had given a complaint against you and you got a notification about that. So if you made the posts(and the template) by mistake(without knowing of the copyright issue), then you would have contacted me.instead,you reposted the whole of it once again as if you don't care.So there was not choice for me but to make another complaint.

    ReplyDelete
  13. I do have a question -- I have added several extra links to the list -- not just the pages. This makes the list several lines long. In Chrome (my browser of choice), everything is great -- the lines wrap to the next line, and it all looks and works perfectly.

    In Internet Explorer, however, the end of the line doesn't wrap. Instead, the description of the link wraps on itself, causing the next line of links to move way down the page.

    Is there any way to fix this? It makes things look bad.

    You can see my blog @ http://donrisi.blogspot.com/

    Thanks!

    ReplyDelete
  14. This worked ingeniously. ive been working all day trying to figure this out and your post took me all of 3 seconds. i actually appreciate you making me look dumb lol. The only thing i had to ensure to do on Blogger was "Delete Widgets" after saving the template. It works perfectly. thanks

    ReplyDelete
  15. my blog apears just only 5 post. Auto pagination is activated and i dont know why, can you help me? I want at least 10 posts is main page, thank you.
    http://www.kostasanagnostopoulos.blogspot.com/

    ReplyDelete
  16. Excelent! thks a lot:) www.casapereria.org

    ReplyDelete
  17. Hi there,
    I've been looking for this kind of tip for a few months now so I was really excited to try this on my blog. But I don't know if I'm getting it wrong….
    If you just paste as you say, my "page-menu" disappears and the linklist don't show up. So a few questions:
    - Do you need to change the name of your PageList component or add a new component with the name LinkList123?

    ReplyDelete
  18. Hi, I can't seem to find the "Quick Edit Wrench Button" - any suggestions?

    ReplyDelete
  19. how do i get ride of the HOME button that appears first as default

    ReplyDelete
  20. @GreenPanoply

    Click on the "Quick Edit Wrench" button and the widget will open a new window. One of the entries should be "Home." To the left of that will be "Edit Delete" and a couple of up/down arrows. Just click "Delete."

    If you don't see the "Quick Edit Wrench" button, go to your Blogger dashboard, and click on "Settings." Click on the "Design" tab, then click on the "Edit" button for the widget.

    Hope this helps.

    ReplyDelete
  21. I'm totally confused now. I made the replacement and nothing seemed to change except now there is a Menu widget below my header--when I click Edit it is empty. My Pages widget is still there with all the stuff I had already attempted to do. I want to add recipes from my posts to the tab called Recipes. Please help.

    ReplyDelete
  22. I figured it out! Just needed to populate the links for the Menu tabs (as step 5 explains). And delete the Page Widget. :^)

    ReplyDelete
  23. It didn't work for me! I tried it on one of my blogs "Heart TO Heart".

    ReplyDelete
  24. Nope. Didn't work for me either. Did it step by step, but after saving the template and deleting widgets, there is now nothing underneath my header, including the quick edit wrench!
    Any suggestions? Sounds like a fantastic solution if i could get it to work.

    ReplyDelete
  25. It makes mine like a list instead of a header, how can i change that?

    ReplyDelete
  26. Didn't work for me. It just removed my page tabs altogether.

    ReplyDelete
  27. My bad - it did indeed work. I wasn't expecting my existing pages to disappear, but once I put in new links they came back! Thanks heaps!

    ReplyDelete
  28. very useful to me...so thanks to u... check this link
    http://tamilkavithaigal2u.blogspot.com/

    ReplyDelete
  29. That's great, finally I found a solution for perfect menu.

    ReplyDelete
  30. IS THERE A POSSIBLITY TO HAVE A SUBMENU IN A LINK LIST?
    thanX in advance.

    ReplyDelete
  31. thanks bro.. working perfect :) http://www.learneveryone.com

    ReplyDelete
  32. Perfect! This is *exactly* what I was trying to figure out on my own for the novel I'm serializing, and now all I have to do is play with the "home" section. Thanks!

    ReplyDelete
  33. Hi,

    Everytime I go to copy this code over that line, I get an error message that says "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "". Do you know what I need to do to fix this? Mine is a custom template but I use the Page List gadget

    ReplyDelete
  34. how to get ads in sidebar in pluggin

    ReplyDelete
  35. i can't make it ... in my blog

    ReplyDelete
  36. I've got the same problem as Shasie:
    "Everytime I go to copy this code over that line, I get an error message that says "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "". Do you know what I need to do to fix this? "

    ReplyDelete
  37. Got it worked out! I'd clicked "expand widget templates" when I shouldn't have.

    Awesome! Thank you so much!

    ReplyDelete
  38. Thank you so much, it worked!!!!!!!

    ReplyDelete
  39. it works, thank you..,
    great job mate..

    ReplyDelete
  40. thanks, i've come again... :D

    i rewrite you tutorial to my language (Indonesian) on my blog, i hope you give me the permission

    dont worry, i will linkback you on the post... :D
    check this out:
    http://rental-sukses.blogspot.com/2011/04/mengganti-gadget-daftar-halaman-dengan.html
    thank before...

    ReplyDelete
  41. This is great and works well, but what I would like to know is how to make just a single page in the page list show in a new browser window and not all of them. It's easy to show all page elements in a new browser window by adding target="_blank", but how to do it if I want to apply this only to one of the items in the page-list ?

    The item I want to apply it to is a static page and not an external link nor the homepage itself which would have made it way easier. Is there a way to refer to the specific pages instead of using the 'data:link.target', like 'data:blog.url.homepageURL' is the reference to the Home-page ?

    Been searching for ages and hope that someone knows a solution.

    ReplyDelete
  42. Change the second occurrence of
    <a expr:href='data:link.target'><data:link.name/></a>
    in the above code with
    <b:if cond='data:link.target == "http://google.com/"'>
    <a expr:href='data:link.target' target='_blank'><data:link.name/></a>
    <b:else/>
    <a expr:href='data:link.target'><data:link.name/></a>
    </b:if>


    Edit http://google.com/ with the url of your static page which should open in a new window. you can also change the first occurrence of the link code if needed, but i think that's unnecessary

    ReplyDelete
  43. @Devilin Pixy - the previous comment was actually for the link list gadget. So if you are trying it out on a page list gadget, then you should read my previous comment after the following edits.
    In place of data:link.target , the page list gadget has data:link.href
    Similarly instead of data:link.name , the page list gadget has data:link.title

    ReplyDelete
  44. hi admin,
    ur blog is awsme...
    can u tell me how place paypal donate button in blogspot.
    or plz make a new post about paypal donate button in briefly.
    thannks.

    ReplyDelete
  45. I want to limit the number of links to show in list and the rest of the link should be on the next page. How can I put a number page as for the link

    ReplyDelete
  46. @Bokals - you will have to do that manually.. may be create a new page with a list of remaining links, and add this page as the last item in the top navigation link list.

    ReplyDelete
  47. @Aneesh - creating a new page will end up to the same link list widget.What I want to do is to limit the link and the remaining must be found on the next link list. This is what I need to do. http://1.bp.blogspot.com/-pX3YIs24vNg/TeqLInP2ZfI/AAAAAAAAAGc/1sjjeVoBdcU/s320/link%2Blist.jpg

    thanks

    ReplyDelete
  48. This is an amazing trick! Thanks a lot.

    ReplyDelete
  49. Is there a way this trick also apply to the mobile version? On the Smarthphone you do not see the links!

    ReplyDelete
  50. any way to assign drop down child pages to this configuration?

    ReplyDelete
  51. Thanks again. Had not been working on it for a while and was amazed how easy it actually was. Not sure why i didnt see it before, but adding target='_blank' in the right place now makes it show static pages from the pages gadget in a new browser window.
    Thnx again ... ;-)

    ReplyDelete
  52. how do i get rid of the HOME button that appears first as default....when I go into edit this gadget It does not appear in the window even for me to edit it??

    ReplyDelete
  53. I would also like to eliminate the auto-generated "home" tab and replace it with a "home" tab that will in fact link to a sister site I want to stand as the home page.

    These tips did accomplish most of what I wanted to do tho -- thanks.

    ReplyDelete
  54. I have no problem finding where to put your code but when I make the changes I get this error in Spanish unfortunatly but let me know if you have any ideas.....

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".
    Error 500

    I double checked I had copied the code properly and pasted over the line you said .... cheers Allan

    ReplyDelete
  55. I'm also looking for a way to change where "Home" points to. I want to redirect it to another site. Is this possible?

    ReplyDelete
  56. Is there a way I can use pictures as links for pages?

    ReplyDelete
  57. hy do have a look at my blog i wana add pages to this custom menu n im unable to do so help me.....
    www.4wheelinfo.com

    ReplyDelete
    Replies
    1. that's a custom drop down menu. If you want to edit or add links, you have to go to Template > Edit HTML and Find(Ctrl + F) each of the Menu names. For example search for All Cars, replace it with the title you want, and replace the associated # with the URL which you want the link to point to.

      Delete