Related Posts with thumbnails in a website is very essential in Blogger Post. Eventually, the related post widget was previously comes inbuild in Blogger Templates, but you have the template which you like the most and it doesn't have Related Posts section then it quit different.
Now here is a wonderful tips and tricks for displaying related post section with the Thumbnails below each and every posts of your Blog. With this amazing tips, the reader will remain on your website for a long period when they get their interesting post on your related post section/widget.
Also read - Top 5 Blogger Templates For News Websites 2022.
Also read - 10 Best Food Blog Themes or Templates for Blogger.
Also read - Top 5 Free Shopping Website Template for Blogger.
So, let us know - How to add related post widget in blogger with the thumbnails? But before we begin, Blogging Zero have shared a lots of tips and tricks regarding Blogger. so if your interested in it you may read our post on How to remove ?m=1 from blogger url, how to generate Contact us page, Disclaimer page, About us page in blogger, how to add related posts widget, feature post widget, popular posts gadget, etc, SEO and Rankings and many more.
BloggingZero will show you three different methods of Related Posts Widget with stylish Thumbnails in Blogger/Blogspot. Follow the following given steps to add stylish related posts section.
How to Add Related Posts Widget with Thumbnails
(1) First Method -
The first one is stylish, unique and responsive related posts widget for Blogger. So, we have kept it first. But now you don't need any third party widget because this advance related posts widget or gadget fulfill your all the present as well as future requirements.
Step 2- Then click on the Theme/Template section.
Step 3- After that click on the Edit HTML option.
Step 4- Using CTRL+F or CMD+F search for </head> tag and just above of this tag Paste the below given code-
NOTE; Replace 4 to any numeric number to reduce/increase posts to show.
Step 5- Now search for <div class=’post-footer-line post-footer-line-1′> and just below of it paste the given code-
Steps -
Step 1- First of all go to Blogger Dashboard.Step 2- Then click on the Theme/Template section.
Step 3- After that click on the Edit HTML option.
Step 4- Using CTRL+F or CMD+F search for </head> tag and just above of this tag Paste the below given code-
<b:if cond=’data:blog.pageType == "item"’>
<style type=”text/css’>
/*****************************************
Related Posts Code
******************************************/
#related-posts {
margin:0 0 0px 0!important;
overflow:hidden;background:#f6f6f6;
width:100%!important;
height:auto;
padding:0px 0!important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
}
#related-posts:hover{box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.7) !important;}
#related-posts h2{
margin: 0px !important;
padding: 20px !important;
color: #fff;
font-weight:bold!important;
font-size:24px;
font-weight: normal;
background: #650692;
text-transform:uppercase;
letter-spacing:1px;
font-family:verdana!important;
background:linear-gradient(135deg,#2403a9 0,#8f0284 44%,#006d68 100%);
text-decoration:none!important;
}
#related-posts a{
font-weight:bold!important;
color:#111;
font-size:6pt;
border:none!important;
line-height:2.4em;
text-transform:uppercase;letter-spacing:1px;font-family:verdana!important;text-align:center!important;
width:23%!important;
font-family: arial!important;
border-right:0px!important;
display:inline-block!important; float:left; position:relative; overflow:hidden;
}
#related-posts a:hover{
color: #111;
background:none!important;
text-decoration:underline!important;
}
.attb{opacity:0; height:1px!important;}
#related-posts img{
border: 1px solid #111 !important;
padding: 1px !important;
width:120px!important;
height:80px !important;
margin-right: 5px !important;
overflow: hidden;
background:#0c6aff!important;
}
#related-posts img:hover{
opacity:0.8;
}
</style>
<!–Related Posts with thumbnails Scripts and Styles Start–>
<script type=’text/javascript’>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_9z7N3KbjvKflZql3duF42k0XT8CL3j2Zl2qJudtqRRVMY6jQuvgRvEkV2jX9vk4nCqX95_yRovePWQ0t7ccv6BfhEqRijsWR7JQDKd62dL1SDiP0u236R-Wo74gmsT_kI5EXXd4lhEw/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Content:";
</script>
<script type=’text/javascript’>
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.media$thumbnail.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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_9z7N3KbjvKflZql3duF42k0XT8CL3j2Zl2qJudtqRRVMY6jQuvgRvEkV2jX9vk4nCqX95_yRovePWQ0t7ccv6BfhEqRijsWR7JQDKd62dL1SDiP0u236R-Wo74gmsT_kI5EXXd4lhEw/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>60) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"…";
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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!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 < 30 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:150pxpx;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:90%;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font:Arial;font-weight: bold; font-size: 16px;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
</script>
<!–Related Posts with thumbnails Scripts and Styles End–>
</b:if>
NOTE; Replace 4 to any numeric number to reduce/increase posts to show.
Step 5- Now search for <div class=’post-footer-line post-footer-line-1′> and just below of it paste the given code-
<!– Related Posts with Thumbnails Code Start–>Step 6- Now click on the Save option. You're Done !! :)
<b:if cond=’data:blog.pageType == "item"’>
<center>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<script class=’ripple-effect’ expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"’ type=’text/javascript’/>
</b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
<a class=”attb” href=”https://www.mybloggerguides.com/2016/10/stylish-related-posts-widget-for-blogger-with-thumbnail.html” title=”stylish related posts widget for blogger”><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCumfWHGBH5guMPC52H22ob9a4eRnRhtoMXnCbiw9twOhnSSJgSw5zgVBjf9RJXYweaB8dXYLXTgpbKtbJeVzaBusStBCM_ok-6YWDL1ynuwbJ9pibXM6ZLSEaMYgnWYvUSgS7k5fY0Yk/s1600/relatedposts.png” /></a>
</div>
</center>
<!– remove –>
</b:if>
<!– Related Posts with Thumbnails Code End–>
(2) Second Method-
Steps-
Step 1- Go to Blogger Dashboard > Theme > Edit HTMLStep 2- CTRL+F for enabling search box and search for </head> tag.
Step 3- Copy and paste this given below code just above this </head> tag.
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;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;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if>Step 4- Using CRTL+F search for <div class='post-footer'> just above it paste this code-
<!-- Related Posts with Thumbnails Code Start--> <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> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TC4cxTrFdzxor4iLl8kYt5ZAY-dmAxhxwL5n7M7MSvsG5zN-A7oJ6jXGWW0aezXr41OXPCUMu-a7V_0EDu2gE7dj8OG6_1gtxoC3tJTl_bF0_Wu6324H-iMcPT6GeLLGi6qdj0OaUKar/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->Step 5- Edit value as how many post do you want then click on the Save buttom. And you're Done !!
(3) Third Method-
Steps-
Step 1- Go to Blogger Dashboard > Template > Edit HTML.Step 2- CRTL+F use for searching </head> tag.
Step 3- copy and paste this given code just before or above this tag.
<!-- remove --><b:if cond='data:blog.pageType == "item"'>Step 4- Now find the code - <div class='post-footer'> using CRTL+F.
<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{
color: white;
font-family: impact;
font-size: 15px;
margin-bottom: 0;
margin-top: 5px;
padding-top: 0px;
}
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTQAGv_ay_hyphenhyphen2Qih5k2suZ5H66TPqxXmGro4MWbiXEAtU1UuvZa2JuTBwKtr4frJY_qpC7RB0c4c6h3tS56yRMIIWyU87n5W_j1Z-0YK2J0csQQAIIPce0Wz61cvfFkkspWjlz9xoD72w/s1600/no-Image-1.jpg";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://tanachhim.googlecode.com/files/tanacccb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails
http://dailybloggiingtips.blogspot.com/ -->Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 7 posts, replace 7 value from "var maxresults=7;"
Step 5- and just above it copy and past the given code-
!-- Related Posts with Thumbnails Code Start
http://dailybloggiingtips.blogspot.com/-->
<!-- remove --><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=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End
http://dailybloggiingtips.blogspot.com/ -->
Note: change the value from 7 to what you want.
Step 6- Lastly, click on the Save option. You're Done !! Now see your blog you should have a customized Related Post widget.
We have shown you three Different methods to add related posts widget with thumbnails in Blogger. It's depends on you which one you will be going to use. Stay tune!!