Related Posts Widget for Blogger with Thumbnails

1
2
3
4

Related Posts with Thumbnails for Blogger

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger
Here are the detailed steps to install the related posts widget for blogger with thumbnails

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box
2.Now look for

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;"></</span><span class="html" style="font-size: small;">head</span><span class="kwrd" style="font-size: small;">></span></pre><span style="font-size: small;"><br /> </span>

and replace it with

<br /> <pre class="csharpcode"><span class="rem" style="font-size: small;"><!--Related Posts with thumbnails Scripts and Styles Start--></span> <span class="rem" style="font-size: small;"><!-- remove --></span><span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">b:if</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">cond</span><span class="kwrd" style="font-size: small;">='data:blog.pageType == &quot;item&quot;'</span><span class="kwrd" style="font-size: small;">></span> <span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">style</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">type</span><span class="kwrd" style="font-size: small;">="text/css"</span><span class="kwrd" style="font-size: small;">></span> <span style="font-size: small;">#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; }</span><span class="kwrd" style="font-size: small;"></</span><span class="html" style="font-size: small;">style</span><span class="kwrd" style="font-size: small;">></span> <span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">script</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">type</span><span class="kwrd" style="font-size: small;">='text/javascript'</span><span class="kwrd" style="font-size: small;">> <span class="kwrd">var</span> defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xcKTZMuVQ1CSh6ufQhxaFUfbcDnr1Ua0DM6LoPFjUV_y4cvQkv_dBbQ-T-0VKCzU__BGeXL0A4NUyuMu4aYsVGN36NcwVFCmGCpxA3DfvuuUS8GN1tyACrih-CZIDrslS7xUxeR7t_8/s400/noimage.png"; <span class="kwrd">var</span> maxresults=5; <span class="kwrd">var</span> splittercolor="#d4eaf2"; <span class="kwrd">var</span> relatedpoststitle=<span class="str">"Related Posts"</span>; <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span></span> <span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">script</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">src</span><span class="kwrd" style="font-size: small;">='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js'</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">type</span><span class="kwrd" style="font-size: small;">='text/javascript'</span><span class="kwrd" style="font-size: small;">/></span> <span class="rem" style="font-size: small;"><!-- remove --></span><span class="kwrd" style="font-size: small;"></</span><span class="html" style="font-size: small;">b:if</span><span class="kwrd" style="font-size: small;">></span> <span class="rem" style="font-size: small;"><!--Related Posts with thumbnails Scripts and Styles End--></span> <span class="kwrd" style="font-size: small;"></</span><span class="html" style="font-size: small;">head</span><span class="kwrd" style="font-size: small;">></span></pre>

3.Now Find

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">div</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">class</span><span class="kwrd" style="font-size: small;">='post-footer-line post-footer-line-1'</span><span class="kwrd" style="font-size: small;">></span></pre><span style="font-size: small;"><br /> </span><br />

If you cant find it then try finding this one

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;"><</span><span class="html" style="font-size: small;">p</span><span style="font-size: small;"> </span><span class="attr" style="font-size: small;">class</span><span class="kwrd" style="font-size: small;">='post-footer-line post-footer-line-1'</span><span class="kwrd" style="font-size: small;">></span></pre>

Now immediately after any of these lines(whichever you could find) place this code snippet

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

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;">var</span><span style="font-size: small;"> maxresults=5;</span></pre><span style="font-size: small;"><br /> </span><br />

5.To edit the title of the widget you can change this line of code

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;">var</span><span style="font-size: small;"> relatedpoststitle=</span><span class="str" style="font-size: small;">"Related Posts"</span><span style="font-size: small;">;</span></pre>

6.To change the default thumbnail, you can edit this line of code

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;">var</span><span style="font-size: small;"> defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xcKTZMuVQ1CSh6ufQhxaFUfbcDnr1Ua0DM6LoPFjUV_y4cvQkv_dBbQ-T-0VKCzU__BGeXL0A4NUyuMu4aYsVGN36NcwVFCmGCpxA3DfvuuUS8GN1tyACrih-CZIDrslS7xUxeR7t_8/s400/noimage.png";</span></pre>

7.To Change the Colour of the Splitter Line , edit

<br /> <pre class="csharpcode"><span class="kwrd" style="font-size: small;">var</span><span style="font-size: small;"> splittercolor="#d4eaf2";</span></pre><span style="font-size: small;"><br /> </span><br />

To change the other colours and all you will have to modify the CSS


If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.

that is lines

<br /> <span class="rem" style="font-size: small;"><!-- remove --></span><span style="font-size: small;"><b><span class="kwrd"><</span><span class="html">b:if</span> <span class="attr">cond</span><span class="kwrd">='data:blog.pageType == &quot;item&quot;'</span><span class="kwrd">></span> </b></span><br />

and

<br /> <span class="rem" style="font-size: small;"><!-- remove --></span><span style="font-size: small;"><b><span class="kwrd"></</span><span class="html">b:if</span><span class="kwrd">></span></b></span><br />

Permalink: Related Posts with Thumbnails for Blogger

Related Posts Widget for Blogger with Thumbnails 2011-02-18T01:10:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown