Herself's Webtools

I needed to make a link list of all the posts relating to specific plants on Herself’s House Plants. I wanted people to be able to quickly scan the list looking for what ever plant they are looking for instead of having them click the specific plant label and load up 60 plant entries. Blogs are a great format for webpages but some information can get buried.

It was a far more challenging task than I planed. I still do not have a good way to do this. This is a two step hack. You can see it Herself’s House Plants here. About mid way down the side bar is a lengthly list of links to specific plants. You can also see a list of Topics in AI on the sidebar of Herself’s AI.

This is how I did it.

Step 1:
You need to create a feed that will fetch only the items from that label. I learned how to do so at Purple Moggy’s There are several feed instructions and examples there so if my example doesn’t do what you need check those out.

Feed URL

Replace {BLOG ID} and {LABEL} with your information

http://beta.blogger.com/feeds/{BLOG ID}/posts/full/-/{LABEL}

The Feed URL I used (wrapping to fit in column):

http://beta.blogger.com/feeds/999999999999999999/posts/

full/-/Specific%20plant%20information?max-results=100

What it took me several hours to figure out:

- use ‘beta.blogger.com’ not your domain or your blogger account

- 999999999999 is your blog id number Detailed directions to find your blog id number. You will see it in the url when you are logged in and working on posts etc. (?blogID=1234567890123456&post )

- Specific%20plant%20information This is your label, put %20 in place of any spaces.

-?max-results=100 This is the maximum urls you would like in the list. I only have 60 or so plants so 100 is more than I need.

That actually was the painful part. Once you have your feed test it in GReader or some place and make sure you have it correct.

Second Step:
You need a JavaScript to process the list. I used the one from Cut n’ Past JavaScript RSS Feed here. There are thousands of JavaScript from feed tools all over the net. If you have a favorite place use that one.

Then you just paste the JavaScript into a HTML/JavaScript element in your template.

WordPress
For WordPress the feed for a specific category:

http://www.yourwebsite.com/wordpressDirectory/category/CategoryName/feed/

category and feed are fixed, you have to customize to match your blog and category:
www.yourwebsite.com
wordpressDirectory
CategoryName

Then you will need to place the JavaScript some where in your sidebar template. Work on a copy of your template, they are fragile.

There is also a WordPress plugin to show information from certain categories I have not tried it. I just ran across the information while researching how to do the category feed.

* If I can figure out a way to do this with out relying on a third party JavaScript/RSS processing place I’ll come back to here and post the directions.

4/2/10 See also How to lists posts by category in WordPress; for a newer, easier way to do this.

One of the things that makes your blog stand out is to use an original theme. If you are not yet ready to code your own theme, then you can go to the blogger dashboard, then to template and change your header image.

Once in template click on Page Elements. Do you see the section ‘blog name’ ( Header )? Click to edit that.

Once in the edit area you can upload an image from your computer to use as the header.

Well that is all easy enough. However, if you use an image that is a different size than the header image used originally in the template, you may have to go in and hack the html.

An easier option is to find out what size the original image is, and match your new header to that size. Every template is different. You can load up your blog in your browser and select ‘view source’. Start at the top; the heading image is probably near the top. Usually you’ll see a url to an image under one of the heading codes ( h1, h2 h3…). Once you see the url you can enter that in your browser. It will take you to a page with just the header image, nothing else. Drag and drop the image to your desktop.

Using GIMP or your favorite photo editor you can get the image size. Now just create your own image that size or using your photo editor adapt the one you downloaded. Remember you won’t see the change on your blog until you upload the image.

Some of the Blogger templates use these sizes:
TicTac and TicTac Blue Blogger templates use 847×240 pixel headers;
SnapShot, SnapShot Sable and SnapShot Tequila Blogger templates use 700×123 pixel;
Thisaway series uses 760×88 pixel header backgrounds;

See also:
How to create multi-layered web 2.0 headings