SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Thursday, August 12, 2010

Related Posts with Thumbnails widget for Blogger

Yet another awesome Related Posts widget by Aneesh of Blogger Plugins, a seasoned author of widgets for the huge Blogger community! This one is real cool with thumbnails for extra visibility, like that of LinkWithin. Though every one of these widgets serves the same function to bring forth related posts for your readers' further interest or absorption and probably an increase in site's traffic, I personally prefer Aneesh's to LinkWithin's feature for the various reasons:
  • the thumbnails' size is cuter, not overly large
  • you can easily customize the widget yourself to display as you fancy
  • the number of related posts can be decreased or increased beyond the default 5. Experimented successfully with 10 and more! :-)
  • traffic is not directed elsewhere when thumbnails are clicked, so download speed of blog's contents is not hampered. Different from LinkWithin that directs traffic to its own site before redirecting back to our site, and thus slows down page download.
Related Posts widget with 10 thumbnails

If you're interested, simply follow these easy steps on
how-to install the Related Posts with thumbnails widget :
(script code replicated from Aneesh's tutorial at Blogger Plugins. Thanks and God bless you, Aneesh!)
  1. First, ensure these 3 criteria are met to enable this widget to work:
    a) should label all your posts as the widget fetches related posts bearing the same label with the current entry;
    b) should have posted images in your posts for best display, otherwise the default image will be shown instead;
    c) should have enabled your blog's feeds at Settings --> Site Feed.

  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.

    Screen shot of Blogger's Edit Template for tutorial on Related Posts widget

  3. 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 :

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54pVTezXm7Af45GQe_RGn2AH_45Qbs35DSboXdZqODSbGMaYTfUb8d9WB_GMQYDyDYQzhDNhwBP6LHuy8itIJ-GBmBtfGRKGEftIcWOmFuB60WeZOQAzjJ2VIgOuS9dg0zFS0bGDbk-4/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>

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

    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->

  5. 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 (is it because it's designed not to appear on the homepage by default, I wonder?). So, best to check again that your additions are correctly placed to be doubly sure. Then only, click Save Template and View Blog.

  6. That's all to it! The image below shows how the Related Posts widget would appear, resulting from Aneesh's script code above. It will appear only on the posts' pages. If you want it to appear on the homepage as well, you have to customize the widget following step 6 below (do this after you've COMPLETED ALL THE STEPS ABOVE)

    Screen shot of Related Posts with thumbnails widget by Aneesh of Blogger Plugins

Truly a fantastic Related Posts widget with thumbnails which can be easily customized by yourself to suit your style! Some changes were made in mine as seen below where the widget's title and fonts were changed and spacing between thumbnails increased, to name a few!

Screen shot of a customized Related Posts with thumbnails widget


Widget Customization
To configure your widget, you need to go back to the above codes at Design --> Edit HTML (remember to check the Expand Widget Templates box) and make the necessary edits, such as :
  1. To change the title of the widget, find var relatedpoststitle="Related Posts";
    and replace the words, Related Posts with whatever you like.

  2. To change the colour of the splitter line, find var splittercolor=#d4eaf2";
    and edit the color code. Best to use the colour of your post background if you wish the line invisible.

  3. To adjust the number of related posts to show, find var maxresults=5;
    and edit the value.

  4. To adjust the space between thumbnails, find #related-posts a{
    and add: margin: 0px 3px below it. The value 3px is for left and right margins, you can increase or decrease as wish.

  5. To change and restyle the fonts, margins and others, you will need to modify the relevant CSS. Learn more about CSS styling at W3Schools, one of my favourite resource center!

  6. To display the Related Posts on every page, that is, the post pages plus the homepage as well, find and remove these 2 lines from both the script code at Steps 3 and 4 above :
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    and
    <!-- remove --></b:if>

  7. To edit the default thumbnail which is the image displayed when your post has no image, replace the URL that appear after this line of code:
    var defaultnoimage=" to the URL of your own created image.
Hope this tutorial had been helpful and put a smile on your face!

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-with-thumbnails-for-blogger-pro.js
(the above code is found at Step 3 of my tutorial above)
To
http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

38 comments:

  1. Madam, i want a help. see this blog. http://www.writercsk.com/

    In the above blog see the post title which lies at the first. At the end of the post title the word 'new' is written in red colour and it is blinking. how to create a red colour blinking word 'new' after post title? could u help me?

    ReplyDelete
  2. Sorry, Thandapayal! No idea at all how that is done.

    ReplyDelete
  3. i want a great help from you.
    i want to add a google custom search for my blog...i went to google custom search but i got a problem in it. I dont know 'what type of url' to type near 'sites to search' under the second heading define your search engine... my blog url is http://marudhandemo.blogspot.com/

    i typed this url. i got code. but when i typed anything in the custom search bar i didnt get results similar to the results i get in your custom search bar...

    what type of url should i type near sites to search to get results as like the results i get in your search bar?

    ReplyDelete
  4. for example if i type drop down label in your search bar i get result like this

    Jacq's Blogger Tips: How to create Dropdown Labels Menu in Blogger?
    18 Feb 2010 ... Though Blogger has not provided a Labels dropdown option as it did for the Blog Archive widget, it can be achieved by customizing the Labels ...
    jacqsbloggertips.blogspot.com/.../how-to-create-dropdown-labels-menu-in.html




    I want a result like this. for getting a result like this what type of url should i type in google custom search?

    my blog url is http://marudhandemo.blogspot.com/

    ReplyDelete
  5. i will be very much happy if you publish an essay about this in your blog...

    ReplyDelete
  6. Hi Thandapayal! The Google Custom Search that I've installed at my sidebar is the Adsense for Search box! You can browse through this Google Adsense site at https://www.google.com/adsense/static/en_US/Afs.html if you're interested to know more and how to go about it.

    ReplyDelete
  7. hi ....
    i tried this widget.... i got the related post but i cudnt find the variable defined in customization of widget.. in edit html code...
    i checked expand widget too...
    hope u ll give me a solution....and can u tell me how to make apper this widget after read more?

    ReplyDelete
  8. hi ...
    I tried first linkwithin widget..
    it worked fine....then i made some changes with header image... so dat my comments overlappe with linkwithin wigdet . i deleted the linkwithin page element and again i tried to include t... but it s not working ... can u tell me how to fix it ? looking 4ward 4 reply...

    ReplyDelete
  9. Hi ila!
    I'd advise you to try again, following every step exactly, from step 1 right up to step 5 which includes SAVE TEMPLATE.
    With both the set of codes at steps 3 and 4 saved in your template, then only can you find the codes needed to customize the widget. To have the widget displayed after the 'Read More', follow step 6. Take note though that you won't be able to see the result at PREVIEW, but will be in your blog if you've followed instructions to the T and saved the template.

    ReplyDelete
  10. Lovely to get your positive feedback. Thanks, Dentan80!

    ReplyDelete
  11. hi, I just followed your instructions but for some reason the related posts do not show at all. I wonder what have I missed. I just followed upto step 6, but nothing happened. Is there anything I need to change in the code for it to show up.
    thanks

    ReplyDelete
  12. Sorry, lexus05...I've no clue why it doesn't work for you if you had followed steps to the tee! I'd advise that you post your question to Aneesh @ http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html, the widget's inventor, to solve your problem. He's very helpful.
    This widget works fine for images uploaded via blogger but I'm not sure about large images like yours hosted by external source.

    ReplyDelete
  13. I am just trying to change my default thumbnail image (so the correct one shows when people link to my facebook page from my blogger blog) I see in step 7 the code that needs to be edited but in my HTML edit page that code is nowhere to be found. Any ideas of how I can change my default thumbnail??

    ReplyDelete
  14. Hi momsiecharlotte! I'm a little confused! Are you sure your query is related to this widget which displays a set of related posts thumbnails at the end of each post like the LinkWithin thumbnails? Or are you referring to your facebook thumbnail at your sidebar? If, it's regarding the latter, just edit the relevant widget at Page Elements that contains the html code for the current facebook thumbnail you want changed.

    ReplyDelete
  15. Jacqueline, do you think it would be possible to use this code to grab a regular search previews and place them in the post title that links to an outside site?

    ReplyDelete
  16. Sorry, no idea at all! Try enquiring from Aneesh of Blogger Plugins who authored this script code.

    ReplyDelete
  17. Thank you so very much for sharing these very helpful tips!!!! My blog is better for it:)

    ReplyDelete
  18. You're very welcome, Marie! Great to know that you're pleased and thanks for feedback....I appreciated that.

    ReplyDelete
  19. Lots of info here. Thanks for sharing.
    May I show some of these codes on my blog and make a tutorial about in (in bahasa)?

    ReplyDelete
  20. Thanks for feedback and for following, O Randa Bleg!
    All contents in this blog are copyrighted, © Jacq's Blogger Tips. I've put lots of effort on my tips. So, if you're using any of the codes taken from this blog for your own tutorial in Bahasa Malaysia, I'd appreciate a link back to the relevant post. Thanks.

    ReplyDelete
  21. hi Jacqs !
    I did the steps from a - z in the above tutorial. However, sometimes, the linkwithin gadget appears and sometimes the code that I entered (for related posts) appears - at random- without any plausible explanation, and sometimes both appear ! Please help

    ReplyDelete
  22. Sorry, I'm clueless what's causing your problem. I've tried these scripts at four blogspot blogs including my friend's foodie blog at http://cheah2009.blogspot.com/ and they all worked perfectly.
    Probably, you have to choose either one, ie. LinkWithin or Aneesh's Related Posts.... you can't install both, I'm just guessing??

    ReplyDelete
  23. Hi Jacqueline, thanks for the script it works perfect on my page, i just have one query, is it possilbe to expand the space that the post name text has so it can be displayed fully,
    e.g instead of having 5 posts displayed, have 3 using the same space as 5.

    I hope you understand my "doggy" explination.

    any advice on would be greatly appreciatied.

    Many thanks

    Chris

    ReplyDelete
  24. Thanks for feedback, Chris, though sorry that I'm unable to help you further with my limited technical knowledge.

    ReplyDelete
  25. Excellent! Thanks for the code and the instructions! Works perfectly with a few modifications for my photoblog colors!

    Thanks! - OSchrock

    www.ojphoto.blogspot.com

    ReplyDelete
  26. Delighted that you're happy with the tutorial, O Schrock. Thanks for positive comment.

    ReplyDelete
  27. Hi,I need ur help....
    my site....http://www.loltwitt.com/

    if I install this code..I am getting only 6 thumbnails ,even i put 10 posts.
    Reply me....
    Thanks N Regards
    http://www.loltwitt.com/

    ReplyDelete
  28. Hurrey................it is working
    Thanks Lol

    watch this,check this

    http://www.loltwitt.com/

    ReplyDelete
  29. Great to know that all's well now, Lollywood!

    ReplyDelete
  30. Hi Jac..

    I'm a huuuge huuuge fan !!!! yourarticles -how -to's have helped me a great deal !!!! thank you sooo very much for being helpful..esp for non techie new bloggers like me..

    I've put few of ur links on to my site (as useful links)when people click on that they directly go to ur site and get the info they need..

    Do check out my blog when u have time..(i know u r reallllly busy)and let me knwo what u think..I jsut did a bit of editing using ur help..like the read more and signature options..

    your steps are very clear and very precise..it also has these lil reminders to 'preview' and then save..for dummbies like me..lol...I almost screwed up my blog last night by editing the HTML and there u came as a life saver..now I can see all my posts but, all the comments I got have disappreard..can u tell me why or how to get them back?

    thank you very very much jac...you are truly a blessing..keep up the good work...

    merry christmas -from Dubai.
    Babita.

    ReplyDelete
  31. Hello Babita!
    Great to know that! Thank you so much for your exuberant praises and encouragement. Appreciate too your effort in linking to some of my tutorials as useful links. You've brighten my day.
    I've just visited your blog and am impressed with your progress as a newbie. Love it... I can feel its vibrancy, cheer and joy. Keep it up!
    Re missing comments, I'm really clueless... sorry!
    God bless and Merry Christmas in advance.

    ReplyDelete
  32. thank you very much .....finally i solved my problem thanks bro!!!

    ReplyDelete
  33. Great to know that, Abdul Rahman! Thanks.

    ReplyDelete
  34. is it possible to change the size of the image?

    Thanks!!

    ReplyDelete
    Replies
    1. I think it's possible though sorry I don't know how to do it.
      I'd advise that you post your question to Aneesh @ http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html, the widget's inventor, to solve your problem.

      Delete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search