Thursday, April 29, 2010

Static Pages, And A Custom Pages Index

Ever since static pages were released by Blogger, bloggers have been asking how to index non static pages in a static pages (aka "tabs") index. Questions like
How do I publish a label page with my static pages?
and
How do I link to another blog, in my Pages gadget?
and
How do I publish posts in pages?
are asked, fairly regularly.

The typical answer, to the question above, has been
You can't index anything but pages, in the Pages gadget. You have to make a custom index bar.
Posts are dynamic content, and pages are static content. Posts and pages are simply different blog content. And the standard Pages index gadget only indexes static pages.

Fortunately, a horizontal menu bar, to replace the Pages index gadget, isn't difficult to make. You can see one right now, in my home blog, Nitecruzr Dot Net.

If your blog has a new Designer Template, you may wish to go a bit further, and make a custom Pages Index. With a Designer Template, we simply position a linklist in the Pages Tab Index space, and we get a horizontal menu bar / tabs index with the look and feel of a Pages gadget.
  1. First (should you ask?), backup your template.
  2. Go to "Page Elements", and look below the page header space, in the Tabs section. If you do not see a space just below the page header, upgrade your template. The picture below shows what you will want to see. If you have an old blog, with a template created before static pages were released, you'll want to use the Template Designer, and give the blog a nice Designer Template.
  3. If you have a Pages Index gadget already installed in the template, delete it.
  4. Create a linklist, and put some links into it. You can add or change any links that you put into your new linklist, whenever you feel the need. If you want to index posts, use labels, and index label searches. In some cases, you may be better off creating an HTML based linklist, using raw linklist code copied into an HTML / JavaScript gadget.
  5. Position your new linklist where the Pages gadget was (or would be).
  6. Save.
  7. Backup the template, again (yes, do it again)!
  8. Test.
  9. Add more links to the linklist, when you feel the need. It's a linklist, and you hopefully know how to add links to a linklist.
See the "Add a Gadget" space below the header ("Nitecruzr Designer Template")? If you don't see that space there, you need to get an updated template.



You can see my demonstration in Nitecruzr Buzz. I just took the linklist out of the sidebar, repositioned it as I discuss above, and voila. It took me 2 minutes.


Of course, there are details which should be attended to, any time you tweak a new Blogger feature.

For more detail, see Roberto's Report: New Designer Template and the Tabs Index.


(Update 2011/08): The pages editor, in the New Blogger GUI (2011), now provides us with this option.

>> Top

48 comments:

Music Freak (MF) said...

hi Chuck,

Can you please let me know how to get the URLs of each post back after deleting, and not let them being suffixed....

I am sorry if I offended you in some way, as you did not publish my last comment. Please do let me know.. I am really worried as I had some 50k pageviews daily...

Please, thanks..
MF!

Chuck said...

Can you please let me know how to get the URLs of each post back after deleting, and not let them being suffixed..

Sorry, you cannot do this. Once you publish a post with a given title, the URL is indexed. If you delete that post, any more posts with the same title will have suffixed URLs.

You start a new blog (completely new, from the ground up), or you grit your teeth and bear it.

Adam said...

Chuck, these new tabs are almost right, but have a fundamental flaw (at least if the ones at your test blog are a good example). All the tabs are the same color.

True tabs have an "active" tab corresponding to the active content. The other tabs have a different color background, but the active tab is supposed to match and seem to project out from the active "page."

The desired effect is that you are looking at the front folder in a stack of folders, or the front page of a tabbed binder.

Someone at blogger understands this, because Blogger uses true tabs in its own web pages. Including the layout editing page--which you have a screenshot of in your blog post!

Chuck said...

Thank you, Adam. That's the "selected" attribute, which doesn't seem to be available for linklist elements. I'm betting that I can get around that, though it will take a template tweak.

That's a weekend project. Watch this post.

Even without the "selected" attribute being available, the Tabs are way more pretty than the old HTML based "horizontal index".

Music Freak (MF) said...

thanks Chuck, now I read those posts, I wish I had earlier.. BTW, one more question,..

What is then the point of "export blog", if you cant import it later? I was rather betrayed by it. I never read or heard of this before. This is not even in known issues of blogger help..

What would I do with 214 posts and 2165 comments, if they simply have different URLs.. Google Crawler is not gonna forgive me for duplicate content.. Already all my posts are copied by spammers in hundred other places...

I would rather quit blogging, which I wanted to.. but definitely not this way.. Google blogger is awesome, it understands human feelings and provides no recycle bin.. Blogger team are very nice coders, I cant question google engineers, can I?..

Okay forget about me and my blog... But I want you to escalate the bug (in genral) to google engineers .. So that others don't fall in this trap.. I'll be happy that I sacrificed my sweetheart for discovering one bug.. Thanks..

Adieu
MF!

Chuck said...

What is then the point of "export blog", if you cant import it later?

You export posts from one blog, and later import those posts to another blog. What need do you have to export then import into the same blog?

This is not a defect, it's how Blogger works.

Micorson said...

OMG! You replied on my help forum question, linked to this page in it, and it helped! Thanks alot!

mrclm said...

My only question/thought is does making a static home page get you dinged for SEO type stuff since new things are not being put up on the "home" page? I'm pretty new to all of this, and that isn't a problem for me, but I could see if you were making money on a blog it would be of concern.

Bob and Meredith DeVoe said...

Having gone through all the associated links and posts I still have a question... do the links have to be a separate blog that I create?? Or are the links to labeled posts? Thanks man.

Chuck said...

Bob and Meredith,

You can link to individual posts, archive retrievals, label searches, and / or static pages, as you wish. It's your blog. Just get the URLs right!

Moqua Loca said...

Hi Chuck,

I am a novice blogger who recently started my blog. I would like to have tabs at the top of my page, and while your instructions are quite thorough, I think I am confused.

I would like to add additional pages via tabs at the top of my home page, that will open up a new page for my short stories. I want to be able to continue to add chapters to my short stories and have them separated by title of the story, does that make sense?

Chuck said...

If you want to continue to add chapters, and have them separated by story title (and displayed on the same page?), give all chapters a common label. Then link a tab button to a label retrieval.

FARNAM 2010 NCIP said...

I am attempting to create a blog about our community. I want to have a different subject on each post with a common Title. This I can do BUT now I would like to add pictures to correspond with each post, ie., Houses, Dogs, Cars, and etc.. I downloaded pictures using the the design page and 'gadgets' ie., pictures and thought I had it all set up, looked at the preview, liked what I saw then went to the next post 'Dogs', did the same and so on through 7 posts, then all of a sudden every post had the same pictures on them...the last ones I had added in the column to the right of my posts. What did I do wrong? If I want to add pictures do I have to insert them with my post or can I go outside the post (compose mode) and put them to the side? Thank you

Chuck said...

Farnam,

I see several problems in what I think that you are doing. We need to discuss this in detail, in BHF: How Do I?.

Jane Obide Photography said...

Hi, I just followed your instruction on adding a link to my page gadget.eg my blog looked like this:
Home About Portfolio Contact

I created a link following your instructions so when someone clicked my portfolio it directed them straight to my website. That worked fine. Because before it was only a static page. But how do i create a page gadget so I have all of them on a page as i had before.I mean listed like i had before. Do i make sense? Please help.

Chuck said...

Jane,

Can you please ask this question in BHF: How Do I?, so we can diagnose the problem that you have?

Douglas Turner said...

Hello Chuck... a big thanks for your easy to follow instructions! Now I know the source! added linklist tab... and here I thought it would take some complicated html skills.... my blog: CULTURE. http://douglaseverettturner.blogspot.com/
Upwards,
Douglas

Michie said...

Hi! How do I make my tabs look like yours (side by side?) Mine is like one tab eating up an entire row. Then below it is another tab for the link list. Thanks!

Michie said...

Hi again. Please disregard my previous question. All okay now as I read your blog thoroughly. Your posts are really of great help. :)

Zeina said...

Hey guys I need help! How do I create a link? Basically I would like to have postings under different pages but I can't find the links?

Chuck said...

How do I create a link?

See Step #4, above.

Kirby said...

My roommate and I post of the same blog, we are separate contributors. I'd like to create a static About Us page, a Posts by Kirby and Posts by Melissa links under the header.
Is it possible to have both static and non-static page links under the header?

Chuck said...

Kirby,

Publish "Posts by Kirby" and "Posts by Melissa" to labels, then have links for label retrievals.

Kumi said...

wait....so i made this custom index thingy...now how do i make it look like posts are on those pages that i linked into the custom index 0_0

~Cheers

Megan said...

I already have a linklist set up on my blog for static pages but I don't know how to make one of the pages enable a label search. How can I do this?
I want it to look say this: Showing newest posts with label Stylebook. Show older post.
on this blog: http://www.extrapetite.com/search/label/Lookbook

Chuck said...

Megan,

Look at this post, "Static Pages, And A Custom Pages Index", and the Topics list at the bottom of the post.

Topics: Blog Template, Designer Templates, Nitecruzr.Net, Pages, Static Pages, Template, Template Editor, Template Tweaks, Web Site

Each of those topics is a link - and each link is a label search.

Look at the link behind "Static Pages".

http://blogging.nitecruzr.net/search/label/Static%20Pages

That's the label search for "Static Pages". If I was adding a label search for "Static Pages" to my linklist, that's the URL that I would use.

Pamela Hill said...

Thanks!! That's exactly what I needed & it couldn't have been easier!! Keep up the helpful posts!

mj said...

ok, was able to make links and place it where the Pages should be. But how can i add multiple urls in one link? im trying to categorize my blogs (just starting out on this site. I have named my links as Travels and Food but only one url is accepted or is there a way to place multiple urls? thanks a lot :)

Chuck said...

MJ,

Can you please ask your question in Blogger Help Forum: How Do I?, so I can figure out what you want?

medical student said...

Thanks chuck,
I had a a lot of information from your posts to develop my blogsite..
[I mean to add search-list pages]
and I hope to take them in future too, I am a newcomer to BLOG..
ms!

Kristin said...

Dear Chuck,
I understand how to change the top bar from the pages gadget to the link list (thank you for those awesome instructions!) but I am confused about how to make each page able to comment and index each post. Do I have to make a totally separate blog for each different category? I am trying to create a community blog where there are different topics for posting including recipes and would like for the people to be able to post comments under each post instead of only one comments section at the very bottom of the page. I hope that makes sense. Thanks! ~K

Chuck said...

Kristin,

If you index label searches and posts using the linklist, each post (in single post display) will have a comment form, and each post (in a label search) will have a link to the single post display - just as you see on your main page.

Just index a label search, and look.

~ Monique said...

I am sooo incredibly lost!!

If I post something it goes directly to the home page. I want it in Home & a seperate page. So say I'm wanting a recipe section where I can keep adding different recipes (that show date posted & any comments), how do I do that?

Right now I can only post the one recipe.

I REALLY need a step by step guide that shows/tells me how to do it.

I have no idea how codes/links ect. work and I'm finding the current explanations way to complicated. HELP PLEASE!!

Adventures as a Small Town Mom said...

Thanks for posting this! I was able to add the link list, but was curious if there is anyway to have the "Showing newest posts.." verbiage hidden for my label search pages? Thanks in advance for any help!

http://www.adventuresasasmalltownmom.com

Mimshach Musings said...

Hi. I've just come across your blog as I seek help!

I created a bunch of tabs on my blog using the 'Pages' gadget.

I need one of these tabs to be an external link to my my amazon.co.uk aStore (http://astore.amazon.co.uk/mimshmusin-21) and maybe one to my twitter account (http://twitter.com/#!/MimshachMusings)

So far with my blog, I have now created both tabbed pages and link list pages - I currently have one sitting over the other! I did try deleting the tabbed pages gadget but I don't know how to add tabs to that don't need external links.

See: http://mimshachmusings.blogspot.com/

I cannot work out how to combine them so they sit along one line of tabs.

I'm no expert in html code and what I have achieved is through research and basic knowledge...but now I am stumped.

Any help would be great, if you have time.

Thanks

M

mMimshach.musings@gmail.com

5ohWifey said...

Followed your instructions and they worked perfectly! One question- is there any way to remove the "Showing newest posts with label XXX. Show older posts" bar at the top of each page on my links list?

Chuck said...

The "Showing newest posts ..." box is called the "Status Message".

http://blogging.nitecruzr.net/2007/07/removing-showing-posts-with-label.html

Olivia said...

I am not understanding this after reading all of your posts. Can you please post step by step instructions. When I make a link list I can't put more than one post under there. I want all my posts with a certain label to come up when a viewer pushes "SOMETHING" which will be where the pages gadget would normally go.

indiffer said...

Thanks for the great tip, works like a charm.

Love Where You Live said...

Hi,

Thank you for taking the time to explain the inner workings of Blogger, it is very much appreciated. One Question: I want to add recipes to a Recipe page (or label), but I do not want those recipes to be displayed on my default home page - is there any way to do this?

Chuck said...

Love,

You will need to index Recipes using a label of "Recipes" - plus have a static home page.

http://blogging.nitecruzr.net/2010/05/make-static-home-page.html

Ruby said...

Wow, very helpful! Thank you so much. Will be recommending your site.

Girlfriends Are Like Shoes

Marsha A. Moore said...

This is just what I needed and have been looking for the solution for months. Thanks!

I have one problem. All works fine, except my links end up in a vertical list under my heading rather than horizontal. I've moved it to my sidecar for the sake of nice appearance, but would prefer it under my header, arranged horizontally. Any idea how to fix this arrangement of the link list?

Oscar Garces said...

Hi Chuck Im trying to make my blog homepage just with a picture but to make the blog posts only show in the labels section but not in the homepage
Im not understading it properly if you could please help?

Christina Celver said...

Hi Chuck,
I tried to add a linklist, but my pages that I want aren't actual websites, I don't think they have URL's....I just wanted to have a separate pages to show off some photography and travel excursions, I wanted to be able to add/post to them. Any suggestions? A separate Blog maybe?
cc

Chuck Croll said...

Christina,

If you have pages, they have URLs. Every page has to have a URL.

Look at the Pages gadget, using the Pages editor. Each page (dynamic, or static) will have:
1. An address or URL.
2. A name or title.

If you created a "New page" as a "Blank page", that's a static page - and a static page has a URL. Understand the differences between dynamic pages and static pages.

http://blogging.nitecruzr.net/2012/04/blogger-limits-pages-dynamic-and-static.html

XO Bali Events said...

Can you tell me howto make link to post list? Because I don't want that post lists on homepage. Thank's

Chuck Croll said...

Bali,

You need to publish your posts to dynamic pages - and / or have a static home page.

http://blogging.nitecruzr.net/2012/05/blogger-magic-publish-posts-to-pages.html

http://blogging.nitecruzr.net/2012/06/blogger-magic-static-home-page-improved.html