Related Post With Thumbails In Blogspot

Bismillah (In The Name of Allah) After I wrote about How To Make a Related Post on Blogspot, on this occasion I will discuss about how to make a related post with image, it has a lot of people talk about but no one reply I wrote her back about how to make a related post with picture okay. Here I share my little knowledge and hopefully useful, I can bloggerplugins.org this article from just okay to the scene:

Here I will explain how the easy way first

Your first step you are logged into blogger
After that you open a new tab and visit the site www.linkwithin.com
After that you enter in the blog that will give related post see picture below

Setting how many posts continue to be displayed in your default will display 3 related post but it you can setting up of five post
after the setting you check the box My blog has light text on a dark background on click get widget! and do not forget to select your blog platform,
After Clik get the widget! click install blog widget that will choose the love related post
you can continue with the widget's settings clik to edit content and you can replace the image with the image you have seen the picture below

Related Post With Thumbnails In Blogspot

After the settings click the widget's get the easy way

Both ways, Okay now how to make a related post with pictures but by using java script, here you can organize and display-related post you liked way too easy

The first step you normally log into blogger
Clik setiing blog that will in love articles related to the image
The next step click Edit html and do not forget to check expand widgets
Now you look for the code </ head >
After the meet paste this code

<br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> <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, “Times New Roman”, 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><br /> <script src='http://feflex.googlecode.com/files/related-bloggerwidgetdotcom.js' type='text/javascript'/> </b:if>

Now Search Cede Below

After see the code above or similar to the code, paste this code

<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> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script><br /> </div><div style='clear:both'/></b:if> <br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /> <a href='http://www.blogger-widget.com/2010/02/related-post-with-thumbnails-in.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.blogger-widget.com/' style='display:none;'>blogger tutorials</a><br /> </b:if></b:if><br /> <br />

under the right under the code

After that clik save
You can set how many related posts will show how to find the code below

var maxresults=5;

See you this code after changing the number five to your liking and clik save
Happy blogging from blogger widget.com
Sample Pictur For Related Post

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates