Wednesday, 18 May 2011

Organize Posts with Blogger Pages


Abstract:  When I started this blog I was excited to see that there were pages, so I could organize my content, however under closer inspection I found that they dont actually allow for multiple posts.  These static pages are fine if you never really need to update the data, however I wanted to have individual sections such as Hacking, Science and Technology.  I found a simple (ugly) little method to do this using Javascript and the standard Blogger dashboard.



Method:  It is actually very simple to do this for basic functionality.  First navigate to you Blogger dashboard then go to Posting->Edit Pages->New Page.  This will bring up a prompt for you to compose or Edit the HTML code.  Choose to Edit the HTML code as shown in the image below.

The code shown in the example is simply a javascript redirect which moves the page to the relevant search page for the topic you want.  When you create a new post you simply add the search topic into the Labels section.  For each page just change the redirect URL.

Code:  <script type="text/javascript">
            <!--
            window.location = "http://theuglybanana.blogspot.com/search/label/Hacking"
            //-->
           </script>

Simple paste this with the proper URL for your site and save the changes.   Of course you will have to add a pages widget, but when clicked it will redirect to the relevant search topic.  For example I labeled this post with "Hacking" which is why it shows up here.

Problems: 

  1. Since this is an ugly hack there are a few little problems with it.  First of all since it redirects from one page to another the viewer will see a quick glimpse of an empty page before the redirect occurs, however this is not really noticeable if you have a quick internet connection. 
  2. When you navigate to this "page" the tab will not be highlighted as it is not on the specified page.  Im sure with a little of CSS and screwing around you can make the redirected page activate the button, but I have not done that to date.  An example of what I mean by this is shown below. 

In this picture we are on the hacking page however it is not highlighted.

Conclusion:  This is a quick and very easy way to get post pages organized on Blogger using the template designs and not too much overhead.

-theuglybanana

12 comments:

  1. THANK YOU SO MUCH! Ive been looking for a way to do this but have not found one until I came across this post!!!

    ReplyDelete
  2. I have a problem, it works with the tab "beauty" but not with my 3 other tabs :(
    http://iagw.blogspot.com/search/label/Food

    ReplyDelete
  3. It worked! Thank you SO much!! :)

    ReplyDelete
  4. Not sure what I am doing wrong, but it isnt working for some reason:(Can you help!
    I created a new page and added the URL changing the label and the page just shows up with the HTML code not redirecting it to the labeled post.
    For the posts, I dont have to use any codes, right? Just labels?!

    ReplyDelete
  5. any ideas how to reverse the chron order?

    ReplyDelete
  6. Is there a way to add a paragraph before this? (like an intro)

    ReplyDelete
  7. This is a sweet trick. Google should definitely add this feature. Thank you!

    ReplyDelete
  8. This is great! I've looking all over for a way to organize all the posts! The "Labels" put them where they need to be, but is there anyway to hide certain posts from your "Main Blog" page?

    Thanks,
    Jenn
    jarofseashells@gmail.com

    ReplyDelete
    Replies
    1. Plus one for this question,I have the same!

      Delete
  9. Very nice site for the blogger to get update and get their suggestions.really appreciated.

    ReplyDelete
  10. Hi! I was happy to see that finally someone noticed and even found solution for the static pages problem. I can't resist the need to try to organize my blog better (and to be honest, cute little codes are even less resistible) , so I'm going to follow your advice, but I'm not sure what is difference between using Labels and this. Why did you start using this method?

    ReplyDelete