Wednesday, 7 March 2012

How to add a page with a view of all posts as thumbnails

If you click on the page tab at the top of this blog called POST INDEX you will see that I have added a page which contains a thumbnail of every post ever added to this blog.

I have always wanted to do this because I find it endlessly frustrating to browse blogs easily and who doesn't love a picture!

So here's how I did it (using a combination of jiggery pokery and another tutorial):

Before you start
  • Create a new page on your Blogger Blog and give it a title.  I chose 'post index' although I had hoped to think of a slightly more cool name for it (maybe I'll change it later).
  • Open this tutorial in another web page so that you can easily switch between it and this post.
Now for the steps to follow
  • On the tutorial page mentioned above scroll down the page until you see the 'add to Blogger widget symbol which looks like this.  
  • Click on it which then opens up an option box with lots of details that you can edit such as thumbnail size etc (full descriptions are also shown in the tutorial.
  • Change the title to all posts, add your blog url and set the number of posts to a value significantly higher than the number of posts on your site. I chose 500.
  • Fiddle about with the other settings if you want but then make sure that you click on 'Grid Layout' before selecting 'add widget to my blog'.
  • You will then be shown this page saying that the widget is about to be installed but DO NOT CLICK 'add widget' (unless you want this widget in your side bar instead of on your page like I have)
  • Instead click 'edit content' so that you can see the widget's code.
  • Copy all of the code.
  • Open up your new page in the Blogger editor as if your are going to write a post but instead of selecting 'compose' in the top left part of the screen make sure that you select 'html'.
  • Paste the copied code into the page and immediately save the page.
  • Switch back to 'compose' mode and add text at the top of the page saying 'here are all my posts..' etc
  • Then publish the page!
  • Make sure that you then view the page to check that it worked as you had hoped and close any extra tabs that you now have open in your browser.
  • Congratulate yourself!

Other related tutorials
How to create a new page (an extra tab under your site header) on your Blogger Blog.


Related Posts Plugin for WordPress, Blogger...