Related Posts Widget With Thumbnails For Blogger

A few days ago i've also published an article similar to this subject, How To Add Related Posts Widget To Blogger Blog?. The widget will let you show related posts below every post in your blog, and that the widget is just a normal related post widget.

The new widget will take any image found on the post to display, so if there's no any image found on the post, then the widget will load the pic that i've set, and it's the amazing spiderman. You don't want it to show, realy.. :)



Adding Related Posts Widget With Thumbnails To Blogger

1. Login to your blogger
2. Go to design
3. Edit html
4. Tick on the Expand Widget Template to load the whole codes in your template
5. Now download or copy the whole code in your template for backup
6. Find the closing tag </head< in your template and put the code below right above it:

<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: 5px; } #related-posts h2 { font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, Times New Roman, Times, serif; margin: 0 0 0.75em; padding: 0; } #related-posts a { color: blue; } #related-posts a:hover { color:black; } #related-posts a:hover { background: #F0D0801; } </style> <script src='http://jsmith11325.3mx.biz/Others/relatedpost-withthumbnail.js' type='text/javascript'/> </b:if>

7. Next, find a code similar to the following:

<div class='post-footer-line post-footer-line-1'>

Maybe the whole code looks like this:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span> and bla, bla, bla..
8. Copy and paste the code below just beneath the above code:

<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=7&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=7; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost'> </b:if> </b:if>

9. Save your template and you're done.