.....

17 Related Posts Widget with thumbnails for Blogger

One of the best way to increase page views and readership is using a related posts plugin. After the huge success of thumbnail realated posts widget by linkwithin, Aneesh developed the same widget using custom code which was indeed more reliable and totally customizable.



Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.



Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails


STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:

<!--Related Posts with thumbnails Scripts 24work.blogspot.com-->
<!-- 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="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://24work.ucoz.com/24work-blogspot/related-posts/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts 24work.blogspot.com-->

STEP #2:
Now find this code in the template:

<div class='post-footer-line post-footer-line-1'/>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'/>
Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start 24work.blogspot.com-->
<!-- 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=5&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://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyFOT4CmhI/AAAAAAAAADM/MvlLp1fyfoM/s1600/blogger-widgets.png" /></a><a href='http://24work.blogspot.com' ><img style="border: 0" alt="Blogger Templates" src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TPyE7xQNQxI/AAAAAAAAADI/GzCRDLFH7s0/s1600/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End 24work.blogspot.com-->



Now Click Save Template

..................................................................................................................................
.......................................................................................................................................
..................................................................................................................................

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

var maxresults=5;
To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";
To change the default thumbnail, you can edit this line of code



var defaultnoimage="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";

To Change the Colour of the Splitter Line , edit
var splittercolor="#d4eaf2";








Change http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png Code with The One You Like Bellow

http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png
http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyOzXNLzTI/AAAAAAAAADQ/NlQ5XzcwR7o/s1600/no+Image+2.png
http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyPWE7TeGI/AAAAAAAAADU/lnu_0yAuNVc/s1600/no+Image+3.png
http://4.bp.blogspot.com/_jM8-wHc3NKY/TPyPzvFloHI/AAAAAAAAADY/Zj2ztC16d-Y/s1600/no+Image+4.png
http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyQiKERJXI/AAAAAAAAADc/NRqhRjJ_nhU/s1600/no+Image+5.png
http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyQ02TLA2I/AAAAAAAAADg/7MPwofGc4zY/s1600/no+Image+6.png
http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyRJtqk0iI/AAAAAAAAADk/yoEEdacEtSc/s1600/no+Image+7.png
http://4.bp.blogspot.com/_jM8-wHc3NKY/TPyRczQKPiI/AAAAAAAAADo/2PGT9m8TodU/s1600/no+Image+8.png
http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyRuFEIsXI/AAAAAAAAADs/9fcHpRJTglE/s1600/no+Image+9.png
http://2.bp.blogspot.com/_jM8-wHc3NKY/TPySDDp7ucI/AAAAAAAAADw/qAoI5AmxdBY/s1600/no+Image+10.png
http://2.bp.blogspot.com/_jM8-wHc3NKY/TPySZZo9oYI/AAAAAAAAAD0/1QZtIsQ3cJg/s1600/no+Image+11.png
http://4.bp.blogspot.com/_jM8-wHc3NKY/TPySsIicA9I/AAAAAAAAAD4/FhM0JDSzW7s/s1600/no+Image+12.png
                         http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyS-Hp4UwI/AAAAAAAAAD8/zhSuvl3_YBo/s1600/no+Image+13.png
http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyTMxMOlJI/AAAAAAAAAEA/GLaAraoOeQY/s1600/no+Image+14.png
http://4.bp.blogspot.com/_jM8-wHc3NKY/TPyTdZCASxI/AAAAAAAAAEE/i2ENNrRJOH0/s1600/no+Image+15.png


Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

17 Responses So Far:

The Waverly Inn said...

This is a great post. Thank you for sharing.

Beben said...

like my habit...si bloglang anu ganteng kalem tea
like my habit ...
if find a tutorial blogspot blog...you'll just wait...i'll reviews your blog, great articles here, full stylish :P
regards from si bloglang anu ganteng kalem tea \m/

http://maxalas.blogspot.com said...

a horizontal position and style thumbnails there; if so tell us how to do it thanks from GREECE

Admin said...

wow man!!! You rock..! I tried same thing on over 11-15 websites but only your worked,, not only worked.. It rocked...!!!

bsd said...

thanks buddy it was helpful

Videowp said...

Tutorial yang sangat bagus sekali gan...maaf nich masa promosi MAU BELAJAR MEMBUAT BLOG WORDPRESS DEMGAN panduan video praktis bisa kunjungi
http://videopanduanwp.co.cc
harga saya jamin murah banget bos

mastorsepang said...

i have read every page your blog today, thank u for this article very use full..my question : how to post like your related post between linked within..?? thank you

Freelaptopsandroids said...

@Videowp
yeah,this blog is so great,i've been spending hours trying to edit my blog with tutorials from this blog.now my blog which is
http://www.freebrowsingtime.blogspot.com
is looking nice.but all this is attributed you you.thanks

alrick said...

great blog
http://www.drupalnetworks.com/

ASHEERVADHAM said...

www.tollywoodmp3.in

Nguyễn Hải ™ said...

Thanks http://nguyenhaicntt.blogspot.com/

Sāτū Hāτī Sāτū Cīŋτā said...

Nice information


http://dzhambhanz.blogspot.com/

jayrweblog said...

thanks! it helps a lot.

danish siddique said...

widgets are important for all the blogs to get traffic, and it makes the blog attractive. cheap printer cartridges

Doe Lisa said...

Thanks for give me some information about this training. Your blog very good. My blog autocad Tutorial Pdf

lili chen said...

Potato chips making machine
Pleased to be here and learn about this. Thank you so much for sharing this with us.

Wawan Se said...

good. http://kompasnia.blogspot.com

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger