Sunday, 26 June 2011

How-to: Blogspot Recent Posts Widget


One of the things I like about Blogspot (as Blogger used to be known way back when), is the flexibility to change ANYTHING in your template. You should bear in mind the terms of service before you start ripping out branding and credits elements, but it is a free service, where the technically minded can do what they want - unlike the free equivalent in certain blog platforms I could mention!
There's a huge number of add-in gadgets available, so you can effectively upgrade a template with additional functionality using gadgets, without needing to code lots of scripts or HTML...

The new template used on the Catling Mindswipe has a lot of features out-of-the-box, but a Recent Posts gadget wasn't one. This is easily fixed. I added a Recent Posts gadget with text and thumbnails pre-built.

  1. Login to your Blogger account dashboard, then to Design.
  2. In the Page Elements section of your blog, select a page area and click Add a Gadget.
  3. The usual pop-up window appears containing a large list of gadgets. Continue by clicking on Featured. This contains an impressively long list.
  4. We're looking for the Recent Post Widget with Thumbnails for which I can do a quick search by typing “recent posts thumbnails” on the search bar at the top right
  5. At the Featured list of Gadgets you will find the Recent Post Widget with Thumbnails at the bottom. Click the plus sign to add it.
  6. This changes the gadget selector to the Configure Gadget window. You can changethe gadget title, height, number of posts to appear, the post summary length and other styling elements for layout, fonts, meta-data (date format, comment count). We want the thumbnail and summary text, so using the Snipped Style control, select Summary and Thumbnail. The bottom of this window contains a preview panel so you can see an approximation of your gadget; remember to click on Update each time you change the gadget properties above, so you can see the effect of each change.
  7. When you are happy, click Save to return to the Design/Page Elements area. You should preview your blog from here to see the thing the way it sits on your full blog page. You may not know right way what looks right, but you will know when it's wrong. Adjust the properties by selecting the gadget in Page Elements and clicking edit to bring up that Configure Gadget window.
  8. Click Save at the top of the Page Elements area to save settings and apply the gadget to your live blog page.
NOTE: the Pull Posts from... setting defaults to My Blog. Usually this is fine, unless you have a stack of scripts and code running which take priority over the Recent Posts gadget, in which case you can be looking at a blank gadget. Changing this property to the Blogger blog below and setting the URL to your own blog address seems to fix this problem. RC

No comments:

Post a Comment

At least try to be nice, it won't kill you...