How to Display Related Posts with Picture for Blogger

Display Related Posts with Picture for Blogger

The most important thing for blogger is the traffic, the visitors, and he works very hard to get a lot of visitors every day,
but what to do after getting good number of visitors.
You have to make your visitors keep return to your site and spend more and ore time on your site.
and one of the most effective way to do this is to convince your visitors that you still have more high quality content.
after a visitor finish reading one of your blog posts, he should find some thing related to his interests.
so you may want to make it easy for him to find another related content on your blog,
and the best way to do it, is to use a related posts script, to display list of related posts, not only the posts titles, but thumbnails too.

And we’ll use one of the best widgets for this process, it’s linkwithin.

1. Go to ''Main Control Panel'' >> ''Design'' >> ''Edit Html''

2. Mark on ''Expand Widget Templates'' 

3. Click Ctrl + F  and search for this:

</head>

4. Copy this code and Paste it Before the previous code

<!--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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQ_ElK7Vfdz1za_t5BRfv_c0B9Jvf-pmVw6WtHmfb3HrSC44U71CGu5UL05StVro_r35iveQsg7tA_PC557ANHQ8vgo1iWtjOTcz2GtVdYiDxM6Prba1tPpSAzN48T5RbD_YLaWEtNNM/s400/noimage.png&quot;;var maxresults=5;var splittercolor=&quot;#d4eaf2&quot;;var relatedpoststitle=&quot;Related Posts&quot;;</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-->

  see the picture

If you want to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

5. Click SAVE TEMPLATE

blogger, Tutorials, Tricks, blog, blogspot