Jacq's Blogger Tips: Related Posts widget, tailored for Blogger

Any new find that can improve the look of my blogs always excites me! Whenever I stumble upon something interesting for my wordpress-powered garden site, I'd like to find the equivalent for my Blogger-powered blogs, or vice-versa!

So, having installed the Yet Another Related Posts plugin (YARPP) recently at John&Jacq's Garden site, I then google-searched for a 'related posts widget for blogger' and was rewarded straightaway with a 2-in-1 treasure topping the list of search results. Two equally awesome widgets created by Aneesh of Blogger Widgets as follows:

Both the above widgets will display below each post, a section of links to posts that are related by way of similar labeling to the current one. It's one way of introducing your readers to other relevant contents on your site and keep them engaged. The first widget gives a list of links to related posts while the second includes the thumbnails as well. Take your pick!

I did display the first hack for about a month but a few days ago had decided to replace it with the Related Posts widget with thumbnails (check my tutorial here), the preferred appealing one for me. Regardless, I'd like to share on how-to install the first Related Posts widget (the one without thumbnails), customized to suit this blog as seen in the picture below:

Screen shot of customized Related Posts Widget

Follow these simple steps on
how-to install the Related Posts widget :
(replicated from Aneesh's tutorial at Blogger Plugins, with some minor changes.)

First, you must already have assigned Labels to all your posts to enable it to work. This is required as the widget will select related posts bearing the same label to match with the current post. If you have already labeled your posts, just proceed straightaway to step 2.
Sign in to your Blogger account. At Dashboard, click Design | Edit HTML. Before editing your blog's template, it's advisable to do a backup of it first, by clicking Download Full Template. Then, make sure that you check the Expand Widget Templates box, located on the right.
Next, use the browser's search function (press Ctrl+F keys) to find the following code: </head> and replace it with the following code snippet :


<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY3i4KzNl8P18HQa6K9AzRdctz06M91ztJbuE25Cj3rs5SigpOGC5hMbuBitBkIfBub28u-duOl-ojimOw9UbdbKTDvFrqt3eFMUC9IsxhijklEpwqNSDnBDXAd5OyYfkzPfn7oifi2S0/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

</b:if>

</head>
Next, find this line of code: <div class='post-footer'> and place immediately below it the following code snippet :



<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>

</b:if>
Usually, you will click Preview to see the changes but take note that somehow the changes wouldn't show up in the preview for this widget (don't know why?). So, best to check again that your additions are correctly placed to be doubly sure. Then only, click Save Template and View Blog.
That's all to it! The image below shows how the Related Posts widget would appear, resulting from Aneesh's script code above.

The good thing about this widget is you can customize and restyle the font, colours, spacing and so forth if you know the CSS codes.

I just played around for about an hour or so to come up with something that is more suited to my taste as seen in the top most image. Hehe...took me longer than expected, being not proficient in CSS and had to go back to kindy at W3Schools. And recently, out of curiosity and eagerness to experiment further, I spent another half a day to change the 'tick' image!

These were the changes that I've made previously, just in case someone is interested :

@ #related-posts .widget{ - changed margin-bottom: 10px; to 20px;
@ #related-posts .widget h2, #related-posts h2{ - changed the following:
font-size: 1.6em; to 1.2em;
font-weight: bold; to normal;
font-family: Georgia, “Times New Roman”, Times, serif; to "Lucida Handwriting", cursive;
margin-bottom: 0.75em; to 0em;
@ #related-posts ul{ - changed font-size: 15px; to 10px;
@ #related-posts ul li{ - made the following changes:
the url in brackets was replaced with my image's url at https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5o_bBLrNf7NWPNxb-RQx1sh5Z0RndnZ9g3QxnTTS3bYAvgYUfelYkLTMSRHnmj-UlxFhuErEkw5cMi206ySw_J9OcLgSVOWqrO2sGtEaBaGtYFfcnCYMwIhTLibP0fQdR2rzCzCsE8GQ/s1600/FuchsiaTick-2.jpg (you can create a similar 15x15px image at Photoshop or elsewhere, being mindful to match the background color with that of your blog's post background, then upload it in a blog post and switch to Edit mode to get the URL)
margin-bottom: 13px; to 1px;
padding-left: 30px; to 20px;
@ var relatedpoststitle="Related Posts"; - here, you can edit the widget's title by replacing the words, Related Posts
@ color:black; and color:blue; - you can edit the black and blue colors in the code to your choice if you desire.

My grateful thanks to Aneesh of Blogger Widgets, the ingenious author of this fantastic Related Posts widget that's specially tailored for Blogger blogs. God bless him for his generosity in sharing!

Keep learning~~keep smiling~~keep sharing!!

Update 11/02/2013: According to the author, Aneesh of B.Widgets,
if the script is no longer working, you have to change:
http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js
(the above code is found at Step 3 of my tutorial above)
To
http://bloggergadgets.googlecode.com/files/related_posts_compressed.js

4 comments:

pinoy_omanOctober 28, 2011 at 2:04 PM
Thank you for this useful tips and tutorials.

Now I'm free with linkwithin an nRelate plug in.

I like it though the button of image is quite smaller.
JacquelineOctober 29, 2011 at 10:24 AM
You're most welcome, pinoy_oman!
AnonymousFebruary 6, 2013 at 7:25 PM
It did nothing to my blog. No error but also no widget