Skip to main content

How To Add Stylish Related Posts Widget for Blogger With Thumbnails


Related posts with thumbnail is an important widget for a blog, it has an ability to keep the readers in your blog. There is no widgets are available for related posts from blogger, so we have to do it by little html coding. Don't worry! Here I'm going to give you a complete step by step guide with picture to add a stylish related post widget for blogger with thumbnail.
When we talks about SEO, internal linking contribute a large role in increasing the page views. If a reader enters into your blog they automatically see the 'related posts' widget, this may attract your visitor to click on the next post which will increase your overall pageviews.

There are lots of third-party related posts are available for blogger but they may affects your blog badly because they increase the loading time which cause negative impact on seo of your blog.

Step by step guide  to add stylish related post widget for blogger with thumbnail.


 Step1 : From Blogger Dashboard go to Template > Edit Html.
Step 2 : Adding style to Related posts widget.
Click anywhere in the html code and press ctrl+F, a search box will appear at the right corner, then search for the blow code.

</head>
Now paste below code before the head tag 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts { 
    float:left;
    width:auto; 
}
#related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzEh1ALaHvRTmvFz1Op8oY33SsRucvcEcJZPmkyUWAtGiU1Nodq8LNk-7Yz4lLxRqpxIDRbZNyatQHae-p1ACTWPKOmPTBe2gA_KDRPtaDIuOBU3NGLJTFk11PkmJR5MMLqKYfHXaRekK/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzEh1ALaHvRTmvFz1Op8oY33SsRucvcEcJZPmkyUWAtGiU1Nodq8LNk-7Yz4lLxRqpxIDRbZNyatQHae-p1ACTWPKOmPTBe2gA_KDRPtaDIuOBU3NGLJTFk11PkmJR5MMLqKYfHXaRekK/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Step 3 : To add related posts with thumbnail just press 'ctrl + F' and search for below code


<div class='comments' id='comments'>

Most blogger template have two ' div comment tag ' you have to find the. First one and paste below code before. Or above that tag.

<!-- Related Posts with Thumbnails Code Start-->
<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>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <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=6&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Step 4 : Save the template,  you are Done!

That's it, Now your blog will show stylish related posts with thumbnail. Hope the post helped, if you have any problems please comment us. 


Labels:

Comments

Post a Comment

Popular posts from this blog

How to Add Facebook Popup Like Box to Blogger Blogs

Facebook has released many widgets for Blogger and Facebook popup like box is one of them. A good fan base is the best source of huge traffic and the social media interaction improves the search engine optimization of your blog. Using this one time Facebook popup like box your readers can reach your page easily and this will earn you more like's to your fan page. Without readers your article is a big zero, regardless of the quality of the article, Facebook can increase your blog article readership. Compare to WordPress Blogger have fewer widgets but Facebook like box is a part of social media widget collection and proper use of these widgets can contribute a large difference. If your website gets any penalty from Google, there is a huge possibility to drop in search engine rankings and decrease in organic traffic. So for successful online marketing, a backup plan is necessary to maintain visitors and Facebook is the perfect choice for it. Why you should choose Faceboo...
Post a Comment
Read more

How to SEO Optimize Your Blogger Blog Titles For Higher Search Results

Hello guys, earlier we discussed some of the blog design tips to make your blog attractive. Today i'm going to give you a complete guide on How to SEO Optimize Your Blogger Blog Titles For Higher Search Results . It is an important SEO tips to increase organic search engine traffic of your blog . Title has a major role in search engine optimization of a blog. We all know Blogger is one of the best platform for creating a blog . But it has some limitations when it comes to search engine optimization. There for we have to do some work to make a well SEO Optimized blog. For a search engine, blog post title has more important than the blog title. If you are using Blogger default template you can see that in search results blog title shows before the post title. But Google shows only 65 characters in search results. Showing blog title before post title may affect search engine ranking because post title which have main keyword may cut off due to the limited number of char...
1 comment
Read more

How to Hide or Remove Spam Links From Blogger Comments

Tired of blog spamming? I have the best solution for you to remove or hide spam links from comments of your blog. The comment section of a blog has a vital role in deciding the search engine ranking because it is a part of on-page SEO. As we all know blog commenting is one of the easiest ways to earn backlinks and traffic to any blog. Whether your blog is old or new, every blogger should have an effective comment strategy. Newbie bloggers always try to gain more backlinks to increase their website ranking. So, they will insert some hyperlinks in the comment box. This will leads to spamming and there is a chance to deviate the visitors from your site to other. So when commenting always try to include keywords this will help you as well as the author of that post. Try to remove spam links while adding your thoughts, you don't need to put a link every time to get backlinks. Even no-follow blog comments can also generate traffic if your thoughts are informative. Sometimes we...
Post a Comment
Read more