Hacking Related Posts

Well, after spending almost two weeks looking for a related posts hack I finally managed to piece together one that actually works. Below are the sites from whence the codes came.

I used the script from this page on Blogger Accessories.

The CSS styles from this page on Bloganol.

And the actual HTML blog code from this page on RealTrix.

Now you may use any or all parts of the codes found on the above pages, but for me I found that using the three different codes from each site worked the best. One of the biggest risks associated with "free" hacks for Blogger is that you are at the mercy of whoever is offering the free hack. Don't get me wrong, I appreciate all the time and effort people put into these things, but if (like me) you have no knowledge of what you're pasting into your blog template then even the smallest coding error can cause disaster.

A good preventative measure is to first paste these hacks into a text editor. In certain text editors with syntax highlighting if you save the document as 'html' (File > Save As > Save as type 'html') then the elements within the code will appear colored (as in the image below). This makes it much easier to spot extra characters (like quote marks) and remove them.

There are many text editors out there, but only a choice few have this function. Personally, I prefer Notepad++, because it has this (and many other options) and it's also free. If you are using a Mac Taco HTML Edit comes pretty highly recommended (30-day trial then $24.95).

Another safety measure you can take is to create another blog that you can use to test these hacks before pasting them into your main blog. Call it whatever you want, My Test Blog or Houston, we have a problem! When you create it make sure you choose the same template that you are using for your main blog - this way if the hack works you know it will also work there. If you are using a template from somewhere other than Blogger then just upload that one after you have created your new blog.

The first part of the related posts code I pasted into my test blog was the CSS from Bloganol. There is an image used in this code for the 'bullets' which you can either use or discard. If you choose to use it make sure you save the image to your own server (or wherever you host your images) and then replace the image URL in the code with your own. Hopefully you are already doing this with the codes and hacks you install on your blog.

This CSS style goes directly beneath your beginning 'head' tag (shown below). I also added a comment, which I do with most of my hacks, because this way I can keep track of what (and where) they are.

If you don't know what comments are or how to use them then no worries - Jeff Starr over at Perishable Press has you covered here.

The script (from Blogger Accessories) also goes within the 'head' section of your template code. I just put mine right below the CSS styles. Originally I used the script offered on Jackbook, which was a big mistake (the one on Hoctro is even worse). I wasted a couple hours messing around with the Jackbook code until I happened to read his 'Important Note' - "For some people who always failed and/or getting error on installing this related posts trick Kirk Warren from weeklycrisis.com has founded the solution for you."

Well, thankfully Kirk founded the solution for him.

The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people. Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine. - Kirk Warren

This is important to note because it describes in more detail what I was talking about earlier - how the hack you grab off someone's page may contain extra characters that first need to be removed before you paste it into your blog code. That's where the benefit of using a text editor comes in handy.

Finally, I expanded the widgets and placed the HTML code (from RealTrix) just beneath the 'data:post.body' code in the lower portion of my template (shown in blue).

After this I saved my test blog and checked everything out. One thing you may notice is that at the very end of the words 'Related Posts' there will appear the labels from your article. I don't know if this will happen to you, but it did for me.

I could not figure out how to remove these so I simply made the text the same color as the background of my content area. I did this by adding a font color to the beginning and end of the 'b:loop' section within the related posts code (highlighted in yellow in the image below). This effectively made the labels disappear so that no one will actually see them.

Yes, I know font tags are becoming depreciated, so if this inflames your coding sensibilities you can use CSS to define the color instead.

Once all these codes were in place and I was satisfied with how it worked I then copied all the codes over to TBODC. This related posts hack will only appear on your blog's permalinked pages, which are the pages you see when you click the title of your posts and the 'comments' link at the bottom of them.

The premise of this hack is that (in theory) it will grab related articles based on what labels you used. However, I have found this is not always true. For instance, I have several articles labeled "blog hacks" and "tutorials", but it does not show all these articles in the related posts section. Unfortunately, I am not a coder, so I have no idea if it is something wrong with the code or just something that needs to be adjusted.

One thing that will help is if you have good labels for your posts. I picked some pretty poor labels for my articles and I only realized this once I saw the ones that were being generated under the Related Posts listing. Now perhaps you already know how to do this part, but I kind of stumbled upon it by accident.

I went to Customize > Posting > Edit Posts and while I was on this screen I happened to notice the little 'Labels' drop down box at the top of my lists of posts. I had seen this thing a billion times, but I really didn't know what it was for. I discovered that by putting a check mark in the box next to the articles I wanted to edit I could then use the Label drop down menu to add and remove labels right there in the Edit screen. Duhh! Yes, Mr. Observant, I'm not.

You can also add new labels here as well. Just select 'New Label...' from the drop down list, type in your new label in the resulting pop up box, and then click OK. As you add, remove, and create new labels for your posts the screen will automatically refresh and update each post.

I hope you have learned some things from this short little tut and perhaps it will make things easier (and safer) for you while you're hacking away on your own blog tweaks. As always, if you have any questions, suggestions, or critiques please leave them for me in the comments.

Oh, and while you're leaving a comment, be sure to check out my Related Posts and let me know what you think [grin].