Adding non-static page tabs to pages/PageList gadget

Update Sep. 2011: Blogger now has the ability to add web links to pages gadget, as such the original hack is no longer necessary.

With the new Blogger UI (user interface), you can add any web links (external links, label URLs, individual post links etc.) to the pages gadget. Here’s how:

  1. Switch to the new interface by clicking the “Try the updated Blogger interface” link at the top of the screen (you can always return to old interface at any time).
  2. Go to Dashboard and click the grey dropdown menu next to the blog you want to add the link to.
  3. Select Pages.
  4. Click New Page dropdown and select Web Address.
  5. Enter the tab/page title and the URL in the respective text field.
  6. Save by clicking Save Arrangement button.

Below is the original tutorial (for reference) 

An easy way to add navigation tabs in Blogger is using a Pages gadget. However, as the name implies, there is a shortcoming -the tabs only link to static pages.

Does that mean you should forget about adding tabs linking pages other than static pages? No, definitely not….because there is always a workaround.

Use the hack below to add tabs that link to any URLs. You can add tabs linking to label pages,  individual post pages, website or whatever.

Here’s how:

  1. Go to Dashboard > Design > Edit HTML.
  2. Tick the Expand Widget Templates check box on top right of the HTML window.
  3. Look for Pages gadget code, like this:
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'> 
    <b:includable id='main'> 
      <b:if cond='data:title'><h2><data:title/></h2></b:if> 
      <div class='widget-content'> 
        <ul> 
          <b:loop values='data:links' var='link'> 
            <b:if cond='data:link.isCurrentPage'> 
              <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li> 
            <b:else/> 
              <li><a expr:href='data:link.href'><data:link.title/></a></li> 
            </b:if> 
          </b:loop> 
         INSERT THE CODE FOR THE LINKS HERE 
        </ul> 
        <b:include name='quickedit'/> 
      </div> 
    </b:includable> 
    </b:widget>
  4. Put the code for the  additional links right after </b:loop> as indicated in line 13.
    Each link shall be in this format:
    <li><a href="YourLink">YourLinkText</a></li>

    where YourLink is an URL and YourLinkText is the text you would like to appear on the menu or tab.
  5. Preview before saving.
  6. Enjoy!

153 comments to "Adding non-static page tabs to pages/PageList gadget"

Hack Tutors June 16, 2010 at 1:01 AM    

Sorry, I could not understand. Why should I keep this?

Greenlava June 20, 2010 at 9:50 AM    

@Hack Tutors
With this hack, you don't have to add a separate navigation bar when adding non-pages links.

Koko Bota June 25, 2010 at 5:36 PM    

nice post.....Good..:)

Greenlava June 25, 2010 at 6:17 PM    

@Tutorial Blogging Share
Thanks for dropping by :)

Unknown July 1, 2010 at 11:00 PM    

That's exactly what I was looking for... Thanks!! :)

Anonymous,  July 15, 2010 at 4:06 PM    

"More than one widget was found with id: HTML3. Widget IDs should be unique."
Doesn't work!

Greenlava July 15, 2010 at 5:00 PM    

@Anonymous
This hack doesn't involve HTML widget at all. You just add the link into a Pages gadget.
The error you get has nothing to do with this hack.

Anonymous,  July 15, 2010 at 9:30 PM    

Something else was wrong, sorry for the mix-up.
Due to the error that I have posted, blogger wouldn't save the template and so when I checked to see if your tip works, well ofc it didn't.

Thanks!

Surya Kasturi July 22, 2010 at 3:44 PM    

this a beautiful tool for adding groups link instead of iframe widget.

but mr.green lava can you tell me
1. i want that particular link to open in a new tab, how /?
2. i want to change the position of the link, like say, in between two tabs, where ever i want.
how to do this

Greenlava July 22, 2010 at 5:22 PM    

@spk
1. To make a link open in a new window/tab, add target="_blank" right after href="YourLink".
2. You can put it before of after the original tabs, but not in between.

Anonymous,  July 30, 2010 at 2:55 PM    

what would I put in the YourLink? what link am I supposed to put? I plan to use tabs like a category type to post articles by each category

Greenlava July 30, 2010 at 4:31 PM    

@CheChe P.
You want to put your labels page url, for example
http://cheche-wired.blogspot.com/search/label/Media
will take you to Media category page.

barmybex August 18, 2010 at 4:21 AM    

Hi, sorry but i don't understand this. the code in my 'Edit Hmtl template is completely different. do i just replace what is already there, or just change it.
Mine is this:
[b:widget id='PageList1' locked='false' title='Pages' type='PageList'/]
[/b:section]
[b:section class='tabs' id='crosscol-overflow' showaddelement='no'/]
[/div]
[/div]
[div class='tabs-cap-bottom cap-bottom']
[div class='cap-left'/]
[div class='cap-right'/]
[/div]
[/div]

sorry to be a pain but please help. Thank you.

Greenlava August 18, 2010 at 8:31 AM    

@barmybex
That's the unexpanded code. Make sure you do step 4.

barmybex August 19, 2010 at 2:28 AM    

Thank you so much, you are a legend!!! Much appreciated, thats perfect thank you. :D

Anonymous,  August 24, 2010 at 10:39 AM    

How do I add an email address instead of a page link to the navigation bar, one of my boxes on the navigation bar is marked contact me, but I don't know how to add an email address to it. Thanks :)

Greenlava August 24, 2010 at 1:36 PM    

@Proteusa
Replace YourLink with mailto:PUT EMAIL ADDRESS HERE

Anonymous,  August 30, 2010 at 2:15 PM    

Thanks Greenlava :)
It worked!

Samantha Clarke September 2, 2010 at 11:21 AM    

Hi! This is an awesome post and so helpful. But I want some of my links to appear before the pages do in the bar. Is this possible?

Greenlava September 2, 2010 at 3:43 PM    

@Samantha Clarke
Yes it is possible.
Placing the link codes before this line:
[b:loop values='data:links' var='link']
will make the respective links appear before pages tabs.

Anonymous,  September 3, 2010 at 8:13 PM    

hi Greenlava,

i did what is being said in the above tutorial. I put the link of subscribe via email on the same line with pages title. That is i put the HTML link of subscribe via email really as you u have told above. But there is a problem. the newly inserted HTML link of subscribe via email appears slightly at a higher position than the other titles of static pages...how to rectify this problem?

see this blog of me
http://ramasamydemo.blogspot.com/

Greenlava September 4, 2010 at 2:16 AM    

@d
You have to enclose the link with [li]...[/li] tags. See step 6.

Anonymous,  September 4, 2010 at 11:31 AM    
This comment has been removed by the author.
Anonymous,  September 4, 2010 at 11:55 AM    

i would like to add the code of simple drop down gadget code and the code of search box among the static pages link within the template...

is it possible to add both the code of drop down gadget and the code of search box one after the other among the links of static pages?

Anonymous,  September 4, 2010 at 6:08 PM    

greenlava, great post. I was wondering about how to leave the pages on the left side but add a couple pictures that fit in the bar that link to facebook and twitter on the right side and open to a new window... thanks.

Greenlava September 4, 2010 at 8:34 PM    

@d
To add search box into the bar, refer to Add Custom Search box in navigation/menu bar.

Greenlava September 4, 2010 at 8:47 PM    

@Anonymous
To add a linked image, use this HTML (instead of the code given in step 6):

[li][a href='YOUR TWITTER ACCOUNT URL' style='padding:0px;'][img alt='Follow me' src='YOUR TWITTER BUTTON URL' style='border: medium none ;'/][/a][/li]

replace [ and ] with < and >. Adjust the padding value so that the button tab size matches other tabs.

JRam September 4, 2010 at 11:17 PM    

How many people do u help every day? Greenlava is pure awesome!

Jhan October 17, 2010 at 2:30 PM    

this is so helpful!

thanks.

Mamí♥Picture October 21, 2010 at 10:46 PM    

Hi! It's me again! I am trying to do this on my new template http://mamipictureblog.blogspot.com/ but I can't find this code
Can you help again! Thanks ;)

Mamí♥Picture October 21, 2010 at 10:57 PM    

Never mind my last question! I got it!
Thank you Thank you Thank you!!!
You have the best tutorials in the whole cyberworld!!!!!!!!!
xoxo

Kera October 23, 2010 at 6:09 AM    

You are a LIFE SAVER!! Thank you SO MUCH for this post! Do you possible know how to move the tabs bar to the right??

Greenlava October 23, 2010 at 1:27 PM    

@Kera
Refer to How to align Pages/PageList gadget

Anonymous,  November 2, 2010 at 6:24 AM    

What if I want to have the custom links in the middle of pages? E.g.: page/page/link/link/page. Is it possible?

Greenlava November 2, 2010 at 5:37 PM    

@Anonymous
You can't.
Try replacing the PageList gadget with a LinkList gadget. (but I'm not sure if it will keep the same look)

DP November 12, 2010 at 1:23 PM    

YAY!!!! Thank you. I have been looking everywhere on how to do this. This was so helpful.

http://pregnancybaby411.blogspot.com - my blog. As you guys can see, I basically created different categories from my blog - from the "labels" url (ex: http://pregnancybaby411.blogspot.com/search/label/PMS) and put them into pages. Woot!

Celeste November 18, 2010 at 1:04 AM    

Hi Greenlava,

Thanks so much- this is great! I was wondering, is it possible to put the external link in between certain page tabs? I've moved the code according to some comments, but can only get the link before all of the page tabs or after all of them- never in between. Thanks!

Celeste November 18, 2010 at 1:07 AM    

Oh jeez, sorry! I just saw the Anonymous question a few replies about and realize that it's not possible.. thanks!

zahid November 27, 2010 at 4:56 PM    

Thanks . Nice post. Helped me a lot .

Greenlava November 27, 2010 at 5:38 PM    

@zahid
Welcome, and enjoy the rest of the tutorials :)

Anonymous,  December 17, 2010 at 6:35 AM    

Hello Greenlava, thanks alot for the hack, works like a charm, but I have a problem though, after I click on a link for example and that page finishes loading, it doesn't remain highlited as a normal page would. My blog is here: http://bran-g-photography.blogspot.com/ Is there a way to fix this?

Greenlava December 17, 2010 at 12:58 PM    

@Bran G
Looks like you need to switch to LinkList gadget.
1. Add the LinkList gadget below your current tab.
2. View it. It should look the same as your existing tabs, but the tabs won't highlight.
3. To hightlight them, read this tutorial: Highlighting current page tab in navigation bar.
4. If it works out, delete the old tabs.
Good luck

Designs By J Alex December 27, 2010 at 4:01 AM    

Hi Greenlava Happy Holidays...I have been reading as much as possible from these blogs on how to add information (pictures/text) to my new navigation bar. I have the tabs and bar on my blog page but they have nothing in them. I have tried several methods of making a new page/post with pictures and texts but I don't know how to get that information into the navigation tabs. I want to drag some of the information that is posted now on the blog page (too much there now) into tabs so visitors can view the information without paging down forever. Please assist me..I'm very new at blogging

Greenlava December 27, 2010 at 1:34 PM    

@Jalexdesigns
Happy Holidays.
Email me, I'll reply with the answer.

Ambyr December 30, 2010 at 11:02 PM    

You are awesome. Thanks so much! This tutorial is quick, easy to follow, and was EXACTLY what I needed to link my two blogs together!

Anonymous,  January 12, 2011 at 10:53 AM    

Doesn't work .
Even some parts of the gadget code i can't find,even after i clicked expand widget templates
it doesn't work for mehh :(

The Arizona Russums January 12, 2011 at 12:56 PM    

I can't get this to work (although these are the most helpful, detailed instructions I've read thus far).

I am trying to link one of my page tabs to my other blog. The other blogs URL is http://flowers-fade.blogspot.com and I want the tab title to say A Good God.


It won't let me preview it (it says it's trying to close the window everytime the preview window pops up...

and this is the message at the top of the HTML page 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: Element type "a" must be followed by either attribute specifications, ">" or "/>".

Help???

The Arizona Russums January 12, 2011 at 1:11 PM    

Okay... I got the Flowers Fade blog link to work perfectly, so nevermind my last post.

Now I am wondering how to link my pages to my labels.

For example, I want to have an "A Good Meal" page that collects any recipes I post on my main page with the label food.

I looked up above and saw that I might do this:
[li>A Good Meal</li]

which I added to my blog... the tab came up, but when I click on it, it says the page does not exist. Help again... thanks!

Greenlava January 12, 2011 at 3:30 PM    

@Micah and Jen
You have to add in the label URL as target link, like this:
[li][a href="http:theazrussums.blogspot.com/search/label/Food"]A Good Meal[/a][/li]

Greenlava January 12, 2011 at 8:12 PM    

@Anonymous
Are you sure what's on your blog is PageList gadget?
Go to Design > Page Elements and find out. You should be able to see the word "PageList" in the box.

The Arizona Russums January 13, 2011 at 2:32 AM    

I posted the code exactly as written above (except with < and > symbols, but it still says "Page not Found" when I click on it from my blog.

I have a test post on my Home Page called "Recipe" with the label "food" to see if it will also pop up on my A Good Meal page/tab. When you click on A Good Meal, it doesn't work right.

And I have a Page gadget and it says pages in the box... not PageList. Is that rigtht?

Rick January 13, 2011 at 4:18 AM    

Hi Greenlava - Thanks for the hack - I had this working absolutely fine for the last couple of months - then I changed the domain of the site which the link pointed to. When I went into my blog to update to the new URL I can't seen to get the code to work again. Instead it just looks like it's pointing to this "whatpolitzanddamagedidnext.com/rickpolitzdamergiphotography.com"

Any suggestions?

The Arizona Russums January 13, 2011 at 12:51 PM    

Okay... me again. I got it to actually create the "A Good Meal" page, but when I click it, it just shows all my posts, not just those labeled "recipes" (I switched the label from food to recipes...)

The Arizona Russums January 13, 2011 at 12:57 PM    

Me again...
Okay, so I got my "A Good Meal" page to work kinda...
It no longer says the page doesn't exist.

Now when I click on that page though, all my posts come up, not just those labeled "recipes"

I changed food to recipes in the label URL.... and it says the page is www.theazrussums.blogspot.com/search/lables/recipes.... but all my posts appear on the page.

Help again!

Greenlava January 13, 2011 at 1:55 PM    

@Micah and Jen
I notice a couple of mistakes in the URL you specified:
http://theazrussums.blogspot.com/search/labels/recipes

whereas the correct URL should be:
http://theazrussums.blogspot.com/search/label/Recipes

You can find out the URL of each label by hovering the label (in Labels gadget on your sidebar). The URL will show up at the bottom of your browser.

Yes you're right. It's "Pages", and not "PageList".

Greenlava January 13, 2011 at 3:02 PM    

@Rick
You didn't include the "http://" prefix when you entered the URL. Browsers will regard it as a relative URL, hence the addition of the URL of whatever page you're on when you click the tab.

The Arizona Russums January 14, 2011 at 12:59 AM    

Thank you! You are awesome!

♥Sweetly Made♥ February 8, 2011 at 11:52 AM    

Greenlava you're brilliant! This worked perfectly. Thanks a bunch.

Greenlava February 13, 2011 at 1:40 PM    

@Luvmysibes
Check your email.

Mr Rocky Top February 16, 2011 at 2:52 AM    

Been wanting to figure this out for a while. Thanks for the info!

"Twelve/30 Designs" February 25, 2011 at 9:33 PM    

Its not working for me I can't find the "loop" word even with the expand widget selected.

Greenlava February 26, 2011 at 1:29 AM    

@"Twelve/30 Designs"
Many Blogger users are experiencing problems editing their templates at this moment. Maybe you are having the same problem.

Amy Z. March 11, 2011 at 5:45 PM    

I got it to work, but I was wondering is there anyway to customize the font/ visual aspects? I tried using the customization code that you provided for the normal navigation tabs, but it didn't seem to work.

Greenlava March 12, 2011 at 10:13 AM    

@Amy Z
I have a tutorial for: Template Designer: How to change the appearance of page tabs.

eva,  March 14, 2011 at 4:33 AM    

Hi there, I have read and read and I am still a little confused, I am sorry this must seem so redundant to you. I have added the code and a "recipes" tab has appeared on my tabs. when clicked, page does not exist comes up...I am just confused as to labeling posts so that they all show up in their correct tab

Greenlava March 16, 2011 at 12:17 PM    

@eva
This article explains How to label your posts.
...and maybe you want to read this too:
Adding a tab showing all posts of the same label

Eva,  March 17, 2011 at 3:54 AM    

ahh I finally got it! I think i was OVER readding the instructions...read them one last time and figured it out, I was getting the URL from the wrong place stupidly...Hey I dont know a thing about this stuff..ill leave that up to you.. :) thanks!

Anonymous,  March 19, 2011 at 5:19 AM    

Hi,
your code really works and it is simply superb. This what exactly I want. No one in net has explained as simple as you. I referred your URL as much as I can to all those asked about posting in static pages. Very good code. I read all your stuff. everything is so nice...& You are the man yaar... Once again thanking you very much.
- Arul Kumar
( India)

Greenlava March 20, 2011 at 8:14 AM    

@Arul Kumar
You're welcome.

PeeJay March 21, 2011 at 6:09 AM    

Hi
Please ignore my last comment - found it and done it. Thank you so much. Now I need to find out if I can customise the tabs :0) Not a major disaster if I can't ....

Greenlava March 21, 2011 at 11:25 AM    

@PeeJay
To customize page tabs, go here: Template Designer: Change the style / appearance of page tabs

PeeJay March 21, 2011 at 9:30 PM    

Thanks Greenlava. I found it not long after I'd left the comment - and I've managed to centralise them as well. I've become a follower - very useful tips etc. Thanks so much.

Jessica March 24, 2011 at 9:14 AM    

This was so helpful that I have added your site on my site so I can find tips here easier. I also put together a picture tutorial (based on your instructions) with screenshots and all. Here is the link: http://yoyostamping.blogspot.com/2011/03/how-do-you-link-tab-to-another-blog.html in case anyone is visual learner =)

Greenlava March 25, 2011 at 8:28 AM    

@Jessica
Wow! Thanks :)
The tut looks great!

ShellyJ March 28, 2011 at 3:01 AM    

Okay, I've got my tabs: "Home", "TTC" and "Running". And I have the posts that under each of these tabs labeled. I just can't get it to work when I grab the link and insert it into the HTML code. Have I missed a step? Why does this have to be so difficult? Why can't they just set it up with these options and then you click what you want and voila' there it is- done. Why do you have to know how to manipulate all these codes to do something that seems like it should be so simple?
Thanks,
Shelly

Gen Nexters March 28, 2011 at 11:44 AM    

how do you link tabs to the page? can u tell me where to put for example,
[li][a href="http:theazrussums.blogspot.com/search/label/Food"]A Good Meal[/a][/li]

at? which part of html?

Greenlava March 29, 2011 at 6:18 AM    

@Gen Nexters
Put it in line 13 in step 3.

Greenlava March 29, 2011 at 11:27 AM    

@ShellyJ
Put this in line 13:

[li][a href="http://michellejanko.blogspot.com/search/label/running">Running[/a][/li]

make sure you replace every instance of [ with < and ] with > before adding to your template.

I could not find "TTC".

Ellen Mallernee Barnes April 2, 2011 at 5:48 AM    

Thank you SO MUCH for this!! I've been looking around the web for a couple of hours trying to find a post to tell me how to do this. And now it's done! Much appreciated!

Kshitij,  April 3, 2011 at 3:06 AM    

thanks for this code

Farmgirl Susan April 4, 2011 at 2:36 AM    

THANK YOU!!! It worked beautifully. :)

Gen Nexters April 5, 2011 at 9:23 AM    

um sorry. but my blog is http://gennexters.blogspot.com/

there is nothing yet but when i click on updates. the page does not exist.

i have already put it in line 13 though.

Greenlava April 7, 2011 at 12:39 AM    

@Gen Nexters
Putting an URL in line 13 won't create a page. It merely creates a tab linking to an existing page. In other words you need to put an actual live URL in there.

Stacy Wilson April 8, 2011 at 12:50 PM    

Thanks so much! This was so great, exactly what I needed and even I could figure it out. Great instructions simple yet clear. The only thing I couldn't figure out was when I tried to get it open to a new window I added the target="_blank" right after my url and I keep getting a message that says I've constructed it wrong and it can't have a < in the code? Any help would be great but if not then I am still perfectly happy with how it's turned out so far!

TW April 8, 2011 at 3:53 PM    

Thanks for the code!! It works wonders! However I do have one question, on each of my so-called pages that came from a different blog, there is a "Home" tab that links to that same blog. How can I make it so that "Home" actually goes to the main blog?

http://travelingtipsbyt.blogspot.com

Thanks!

Greenlava April 9, 2011 at 9:47 PM    

@TW
You can replace PageList gadget with a LinkList gadget. With a LinkList you can add any links.
....but, after seeing the rest of the tabs I feel that you don't need multiple blogs (one blog per tab).
I believe what you need is explained in this tutorial:
Adding label (category) tabs to navigation bar

TW April 10, 2011 at 4:12 PM    

Thanks for the help! Although, I think I'm more confused now...I used the LinkList gadget (as of now I have a "Home" Label) and I followed the directions for making it into a navigation bar, but it's just on the side. How can I move it to the top? Thanks!!

TW April 11, 2011 at 2:39 AM    

nevermind my last post, i figured it out! thanks!

gennexters,  April 13, 2011 at 12:47 PM    

um how do i create the url?

R. D. Finch April 16, 2011 at 2:22 AM    

Can I put my blog archive in a tab under the header and still use the hierarchical format with the arrows? I tried doing this as a drop-down menu in the sidebar, and it won't let me use the hierarchical format.

kr April 22, 2011 at 9:49 PM    

thanks ....... i really neeeded this

readerature April 23, 2011 at 6:16 PM    

How do you add multiple posts/links in a page??
Plz help me...:((

Muzhaki April 24, 2011 at 8:23 AM    

Thanks BloggerSentral.
Helpful blog

Peace, muzhaki.blogspot.com

Nicole April 27, 2011 at 7:45 AM    

Hi there! I got this to work just how I wanted, but now I have one question. Here is my website: http://www.photographybynicolemartin.com/ Is there a way to just have the group "Categories" and make it a drop down with labels "Babies" "Kids" "Families" and "Weddings" all under one tab?

I already made my "labels list" a drop down menu, then tried to put it across the top but I don't like how it looks. It is currently at the very bottom of my blog. Thanks TONS!

Greenlava April 29, 2011 at 8:22 AM    

@R. D. Finch
Go to Design > Page Elements, add the Archive gadget and position it on top of Blog Posts gadget.
The create a static page. Name it Archive or something.
After that set the gadget to appear only on that particular page. Refer to this tutorial: Section III of Apply different layout/styling to static pages.

Greenlava April 29, 2011 at 8:31 AM    

@Nicole
Have you looked at Installing a multi level CSS dropdown menu?

paul May 1, 2011 at 11:02 PM    

Hi, Great post. Just what I was looking for, sort of. Is there a way to have this just show the title of the post rather than the whole page? Right now it is showing the entire post, recipe pages, a lot to scroll through. Here's my attempt at a blog
http://theossingtonkitchen.blogspot.com/
Been learning a lot here and trying to put it into practice. Thanks Paul

Greenlava May 2, 2011 at 8:34 AM    

@Paul Craig
Try this tutorial:
Showing only post titles on archive and label pages

Anonymous,  May 6, 2011 at 4:14 PM    

Hi Greenlava,

I need help for my blog as my navigation bar link does not show what i want it to show.

www.takefancy.com

i want my navigation tab to just show the labels i have made on each post.. is that possible?

Greenlava May 7, 2011 at 5:37 PM    

@TakeFancy
There's a tutorial for that:
Adding label (category) tabs to navigation bar

צור קשר: May 8, 2011 at 4:10 AM    

hello.
this is great, thanx.
how do i insert more than 1 link?
thnx.

DAMEDAS May 9, 2011 at 1:56 AM    

How can I center these tabs? Thanks in advance!

Greenlava May 9, 2011 at 8:59 PM    

@צור קשר:
Add more links by duplicating the code in step 4.

@DAMEDAS
It's explained here:
How to align Pages/PageList gadget

M Ahmed May 10, 2011 at 10:50 AM    

I have successful blog but now I want to switch to WordPress as it has a lot more great options which are available in blogger. Is my switch from blogger to WordPress is going to be the biggest mistake in regards it will decrease my traffic and other stuff.

Anonymous,  June 12, 2011 at 7:42 PM    

Thanks for your direction
Helped me a lot

Veronika June 22, 2011 at 11:24 PM    

Hi, I am not good with codes. Could you please let me know where to place link for another website?
Thank you.

[b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='no']
[b:widget id='PageList98' locked='false' title='Pages' type='PageList'/]
[/b:section]
[div id='crosscol-wrapper' style='text-align:center']
[b:section class='crosscol' id='crosscol' showaddelement='no'/]
[/div]
[div class='art-content-layout']
[div class='art-content-layout-row']
[b:section class='art-layout-cell art-content' id='main' showaddelement='no']
[b:widget id='Text1' locked='false' title='Welcome' type='Text'/]
[b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/]
[/b:section]

Greenlava June 23, 2011 at 3:36 PM    

@Veronika
Please tick the Expand Widget Templates check box first. Only then you will be able to see a code similar to what shown in this tutorial.

Caroline Young: Training Manager June 24, 2011 at 1:51 PM    

GREAT. I got it. thank you sooo much - It is really working!
Now, how do I make a color and appearance of the link same as the home page link that is just next to it? http://myclearskincarefqa.blogspot.com/

Unknown June 25, 2011 at 6:34 PM    

it doesn't work when we use the template designer. is it? please help

Greenlava June 28, 2011 at 2:02 AM    

@bunbun
@mAbA
It looks like Blogger has changed the PageList widget code. The code is now splitted into two parts.
The top part is for mobile template. Add this code after [/b:loop]
[option value='YourLink']YourLinkText[/option]

The bottom part is for normal template (the original PageList code). Use the original code after [/b:loop]
[li][a href="YourLink"]YourLinkText[/a][/li]

I hope that will clear things up.
I'll update the post soon.

My Farmville World July 3, 2011 at 6:19 AM    

i was searching for this only

Thanks for posting the tutorial on this.

Pranab July 10, 2011 at 7:24 PM    

Hi Greenlava!

Thank you for the post. It is working now after being through the last couple comments. but I would like it to behave like the original tabs i.e remaining highlighted when on the tab is selected even after the page finishes loading.
I have tried to follow the "highlighting current page tab" post of yours. but I think blogger has already got this template. still then tried to paste your code. but it is not working in anyway.
Please help !

Unknown July 12, 2011 at 6:08 AM    

Works great on the web, but do you know how we can get the links we add to display on the mobile version of blogger?
Thanks!

Greenlava July 12, 2011 at 3:46 PM    

@Jon
Please read reply #117.

Unknown July 12, 2011 at 8:31 PM    

Thanks Greenlava, I saw that reply and looked for the two parts but didn't see them both...are they in the same section of code or split up? I'll have to look again.

Greenlava July 13, 2011 at 6:47 PM    

@Jon
They're in the same includable. Make sure you tick the Expand Widget Template checkbox, otherwise you won't be able to see this:

[b:widget id='PageList1' locked='false' title='Pages' type='PageList']
[b:includable id='main']
.
.
[option expr:value='data:link.href'][data:link.title/][/option]
.
.
[b:else/]
.
.
[li][a expr:href='data:link.href'][data:link.title/][/a][/li]
.
.
[/b:includable]

Unknown July 14, 2011 at 4:02 AM    

@greenlava
Yep, I see all the code, just not sure where to place the
code [option value='YourLink']YourLinkText[/option]. You mentioned in reply 117 to place it after the [/b:loop] but I only see one of those and if I place it there (or anywhere else I tried) I get the page name listed twice in the web version...I must be missing something.
Thanks for your help (again)!

Unknown July 14, 2011 at 4:18 AM    

This might help, here's the full code for my widget, just not sure where to place the [option value='YourLink']YourLinkText[/option] to get the page to show in the mobile version. Tried a number of spots but just makes the page be listed twice in the web version. I'm probably missing something simple as usual :)

[b:widget id='PageList1' locked='false' title='Pages' type='PageList']
[b:includable id='main']
[b:if cond='data:title'][h2][data:title/][/h2][/b:if]
[div class='widget-content']
[ul]
[b:loop values='data:links' var='link']
[b:if cond='data:link.isCurrentPage']
[li class='selected'][a expr:href='data:link.href'][data:link.title/][/a][/li]
[b:else/]
[li][a expr:href='data:link.href'][data:link.title/][/a][/li]
[/b:if]
[/b:loop]
[li][a href='http://www.reversewinesnob.com/2011/05/may-2011-reverse-wine-snob-top-10-wines.html']Top 10 Wines[/a][/li]
[/ul]
[b:include name='quickedit'/]
[/div]
[/b:includable]
[/b:widget]

Thanks!

Greenlava July 14, 2011 at 5:31 PM    

@Pranab
I don't think you can highlight the added links in Pages gadget.
However you can try this method:
1. Replace your Pages gadget with a LinkList. With a LinkList, you have to enter all links (both page and non-page links) manually via Page Elements.
2. Follow the "highlighting current page tab" tutorial to highlight current page.

Greenlava July 14, 2011 at 5:47 PM    

@Jon
Hmm...maybe your Pages gadget is an old version. The addition dropdown for mobile was only added recently.
You can replace it with the new version by removing the gadget, and adding it back.

Unknown July 15, 2011 at 6:27 AM    

@Greenlava
OK removed and added the gadget and now I see both parts. Put the code in both places as you said and the web version works as before, but I'm not seeing my page (Top 10) in the mobile version...did I do something wrong?

Thank you!

http://ReverseWineSnob.com

Greenlava July 17, 2011 at 8:30 PM    

@Jon
It's impossible to tell since I can't inspect your code from here (because it only appears if I'm on a mobile).
You might want to recheck the code. Make sure the added link lies between /b:loop and /select, like so:

[/b:loop]
[option value='YourLink']YourLinkText[/option]
[/select]

Greenlava July 20, 2011 at 12:02 PM    

@Jon
Your code looks fine. I even test it on my test blog. Theoretically it should've worked, but it didn't. I'm puzzled myself :(

Greenlava July 20, 2011 at 12:06 PM    

@Jon
BTW I didn't publish the code you posted because it contains your Adsense publisher id.

valentine July 21, 2011 at 10:06 PM    

i can't find the page gadget on my html . Where exactly do i find it

Greenlava July 22, 2011 at 3:50 PM    

@valentine
Press Ctrl+F, enter "PageList1" in the find box and hit Enter key.

AlaphGypsy August 10, 2011 at 11:57 PM    

I am trying to add multiple tabs to my page, but am running into errors. I'm under the understanding that I just copy the
[li][a href='http://perceptionsofmyreality.blogspot.com/search/label/****
']****[/a][/li]
code, with the new links for each tab I'd like, but it is not working that way. I was able to do my first label page, but no additional ones. I have posted the additional lines of code directly under where I posted my first one. Not sure what I am doing wrong?

Greenlava August 11, 2011 at 3:29 PM    

@Stephi
What do the errors say?

Josh August 21, 2011 at 7:50 PM    

Thanks so much, this info was great!

Anonymous,  September 26, 2011 at 9:42 PM    

Thank you so much! it's really helpful!

Rebekah October 18, 2011 at 1:06 AM    

Thank you so much for this tutorial! I've been trying to figure out how to do this for months, you made it so simple!

Bekah
headoverheels26.blogspot.com

Christine October 20, 2011 at 4:45 PM    

Thank you so much for this post! It was the first one that appeared (and I'm glad it is) when I searched for instructions.

I didn't really like the new Blogger interface - with your help, I'm starting to like it now :)

U-will October 22, 2011 at 1:13 AM    

You're the boss man.. too good. i have been looking for this for almost 2weeks and finally. Thanks

Diane October 24, 2011 at 4:32 AM    

Thanks I had done it the old way once and just changed my background and template - Im glad to see the New version of blogger makes it a lot easier to add!

nice post November 12, 2011 at 5:44 PM    

i love this. it has really helped me

Ashkar November 29, 2011 at 5:21 PM    

Great!!! Implemented in my blog.. Now it is looking like a real blog... thanks a lot... :)

Family Historian January 8, 2012 at 6:08 AM    

I followed the directions but I can't get it to work. I wanted to use a page link to redirect to a 2nd blog that I have. When I click on the blog page tab it does nothing. When I look at the information it states that I have the correct URL, but nothing is happening. Any suggestions?

Greenlava January 8, 2012 at 8:33 PM    

@Family Historian
Did you added the link using the new method i.e. via the Dashboard?
I read that many Blogger users are having similar problems.
I suggest you try the old method, as explained under "Below is the original tutorial (for reference)"

Y.K. Priandanu January 16, 2012 at 11:16 PM    

thankss

Beauty and the Beats February 7, 2012 at 5:38 AM    

Great post, this has been bugging me for ages and finally got it to do what I wanted! Thank you for explaining it in a clear easy way!

shanti February 16, 2012 at 1:58 PM    

Finally! My one questions has been answered after extensive searching with confusing results! Thanks. :)

Rhodora March 8, 2012 at 5:42 AM    

For the longest time, I only had 3 items in my navigation bar: Home, About, and Contact. Now, I have 7! :-) Thanks to this post. Greatly appreciated.

Alissa March 25, 2012 at 8:02 AM    

amazing. just what i needed

Davao April 7, 2012 at 2:14 PM    

Thank you so much!i've been looking for this one!keep sharing your ideas so that newbies like me will learn.

God Bless

Anonymous,  May 7, 2012 at 7:24 PM    

Awesome!! Just what I needed, thank you so much:)

Anonymous,  July 12, 2012 at 1:20 PM    

Thank you so much! I had been trying to figure it out and your post totally walked me through the whole thing.

Unknown August 9, 2012 at 8:26 AM    

Hello! I am getting this display "Showing results for so and so label" after clicking on the tab. how to get rid of it?

Greenlava August 10, 2012 at 1:21 AM    

@Bharata Mitra
I've answered similar question here.

Anonymous,  September 15, 2012 at 6:04 PM    

Thank u so much, i got what i exactly need after reading this...

Unknown October 2, 2012 at 9:43 AM    

I've been trying to add the labeled link to my page in the url section but when i save it's not linked and says javascript...help!

mardyyn,  November 14, 2012 at 1:14 AM    

@Greenlava
At the new new blogger interface it is possible to ad "Pages" as well as "Weblinks" to the PageList-Gadget.
So if i make a PageList including 2 Page-Tabs (Static) and 2 Weblink-Tabs (URLs), there's a problem with the highlighting of the active tab.
The Tabs including the static pages keep highlighted when clicked, but the other tabs (inlcluding the weblinks) are not highlighted when active.
do you have any solution for this problem?

THX!!!

Unknown April 3, 2013 at 2:46 PM    

Thank you so much! This helped! It's as if my blog entries are sorted. :)

Dave October 6, 2013 at 7:26 AM    

Thanks for the tut.