Blogger Hack: Prior Picture Posts @ tk here on Sunday, December 02, 2007 1:05 AM
You could also try tk Social Bookmarking Search or tk Video Search!

Sunday, December 02, 2007

Blogger Hack: Prior Picture Posts

I've been busy again with another blogger hack. It's another hack facilitated by , which has .

Prior Picture Posts?

Inspired by photo widgets seen around the web, I thought to myself, "Why not make my own?" However, Flickr widgets are a dime a dozen and I've haven't got any Flickr pictures that are worth showing off. After staring at for a few minutes, a light bulb glowed above my head and was born.

By scanning your blog articles and retrieving only the first image found in each article, Prior Picture Posts entices your readers to check out other posts that you have written. Articles with pictures will feature in the Prior Picture Posts feed, while posts without pictures are skipped.

Nice! How do I get started?

Adding Prior Picture Posts to your blog is a simple affair. Just follow these 3 easy steps and you'll be done in 5 minutes.

Note: Your Blogspot posts feed must be in full mode for this to work. To check, navigate to Settings -> Site Feed. Ensure that Blog Posts feed is set to Full.

  1. Head over to the and configure it. After configuring, run the pipe and copy the feed address. Don't worry if this sounds complicated, it's as simple as taking candy from a baby (not that I've tried).

    1. Copy your posts feed url. For Blogspot bloggers, it should look like

    2. Got it? Great! Now paste it into the box that says "Enter your Blogger posts feed:".

    3. Finally enter the number of posts you want shown into the second box.

    4. When you're done configuring your feed, run the pipe and look for more options (under Use this pipe). Click Get as RSS.

      Get as RSS

    5. Copy the URL of the RSS feed in your location bar as you'll need it in the next step.

  2. Add a feed widget to your blog and use the URL from the previous step as the Feed URL.

    1. Login to Blogger and click the Layout link.


    2. You should be in Page Elements now. Click Add a Page Element.

      Page element

    3. Look for Feed and click Add to Blog. A window should appear asking you for a Feed URL.

      Add feed

    4. Paste the URL you copied earlier into the Feed URL box in step 3. Click continue.

      Feed URL

    5. Configure the feed options and when you're ready, click Save Changes.

  3. Profit!


More often than not, your images will be wider than your sidebar. In order to combat this problem, simply add these 2 lines into your css to restrict the images' width.

It is obvious what the first line does, but what does the second line do? Well it turns out that Internet Explorer doesn't play well with max-width. A hack around this is to introduce some javascript logic via CSS, which is exactly what the second accomplishes. With the second line, if an image's width is greater than 200 in internet explorer, it'll be set to 200, otherwise it'll be ignored. Browsers other than Internet Explorer will simply ignore this bit of hackery.

Note: When inserting these lines into your CSS, remember to change all three values to the maximum width of your sidebar.


For a preview, Prior Picture Posts is active only on my individual blog posts. Yours may not look exactly the same as I've enhanced mine with CSS. Any thoughts, comments and constructive criticism you may have are welcome.

You could also try tk Social Bookmarking Search or tk Video Search!