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.
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@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.
ReplyDeletebtw 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 :)..
You are right Aneesh!
ReplyDeleteYour 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!!!
wow, thanks..
ReplyDeletethis is very useful..
Is there any way to customize the page links to make them look more like buttons instead of just common text?
ReplyDeleteFor an example check out my blog at http://www.wikzo.com
i will try in my blog...
ReplyDeleteGreat 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@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.
ReplyDeletei.e.
change all <a expr:href to <a target='_blank' expr:href
Great! Thanks again for your work.
ReplyDeleteI 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!
ReplyDeleteHi,
ReplyDeleteI 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.
You have given another complaint against my blogs right?
ReplyDeleteI 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.
@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@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.
ReplyDeleteI 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.
ReplyDeleteIn 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!
Very useful.
ReplyDeleteThanks man!
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
ReplyDeleteHmmm. Didn't work for me.
ReplyDeletei love this post
ReplyDeletemy 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.
ReplyDeletehttp://www.kostasanagnostopoulos.blogspot.com/
Excelent! thks a lot:) www.casapereria.org
ReplyDeleteHi there,
ReplyDeleteI'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?
Hi, I can't seem to find the "Quick Edit Wrench Button" - any suggestions?
ReplyDeletei will try it :D
ReplyDeleteDidn't work for me.
ReplyDeletehow do i get ride of the HOME button that appears first as default
ReplyDelete@GreenPanoply
ReplyDeleteClick 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.
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.
ReplyDeleteI figured it out! Just needed to populate the links for the Menu tabs (as step 5 explains). And delete the Page Widget. :^)
ReplyDeleteIt didn't work for me! I tried it on one of my blogs "Heart TO Heart".
ReplyDeleteNope. 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!
ReplyDeleteAny suggestions? Sounds like a fantastic solution if i could get it to work.
It makes mine like a list instead of a header, how can i change that?
ReplyDeleteDidn't work for me. It just removed my page tabs altogether.
ReplyDeleteMy 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!
ReplyDeletevery useful to me...so thanks to u... check this link
ReplyDeletehttp://tamilkavithaigal2u.blogspot.com/
That's great, finally I found a solution for perfect menu.
ReplyDeleteIS THERE A POSSIBLITY TO HAVE A SUBMENU IN A LINK LIST?
ReplyDeletethanX in advance.
thanks bro.. working perfect :) http://www.learneveryone.com
ReplyDeletePerfect! 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!
ReplyDeleteHi,
ReplyDeleteEverytime 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
That's great, Thanks
ReplyDeletehow to get ads in sidebar in pluggin
ReplyDeletei can't make it ... in my blog
ReplyDeleteI've got the same problem as Shasie:
ReplyDelete"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? "
Got it worked out! I'd clicked "expand widget templates" when I shouldn't have.
ReplyDeleteAwesome! Thank you so much!
Thank you so much, it worked!!!!!!!
ReplyDeleteit works, thank you..,
ReplyDeletegreat job mate..
thanks, i've come again... :D
ReplyDeletei 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...
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 ?
ReplyDeleteThe 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.
Change the second occurrence of
ReplyDelete<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
@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.
ReplyDeleteIn 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
thanks buddy
ReplyDeletehi admin,
ReplyDeleteur 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.
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@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@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
ReplyDeletethanks
This is an amazing trick! Thanks a lot.
ReplyDeletegood web... tank's
ReplyDeleteIs there a way this trick also apply to the mobile version? On the Smarthphone you do not see the links!
ReplyDeleteany way to assign drop down child pages to this configuration?
ReplyDeleteThanks 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.
ReplyDeleteThnx again ... ;-)
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??
ReplyDeleteI 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.
ReplyDeleteThese tips did accomplish most of what I wanted to do tho -- thanks.
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.....
ReplyDeleteNo 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
I'm also looking for a way to change where "Home" points to. I want to redirect it to another site. Is this possible?
ReplyDeleteIs there a way I can use pictures as links for pages?
ReplyDeletehy do have a look at my blog i wana add pages to this custom menu n im unable to do so help me.....
ReplyDeletewww.4wheelinfo.com
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