How to Add a Customized related post widget on your Blog? Stylish Related Post Widget HTML and CSS code, How to Edit Related Post Widget or You also called it "Your Might Also Like" Widget on Blogger?
How to add a related post widget on your blog and how you can customize it to looks better? This is very informative and best tutorial about adding related post widget below blog post, which can be understand by all the blogger whether they are expert or fresher in blogging. To add a related post widget you need to edit the HTML code of the Blogger template and add the CSS, JavaScript and HTML codding in it and here we are simplified the procedure and describe it step by step which can easily understand. Google Blog or Blogger.com has a good platform to start your blog and it's easy to customize the HTML code and you can also upload your personal or third party Blogger Template to make your blog looks better. Blogger is free for everyone so start free blogging today to share your knowledge and passion with your blog online in the Internet world www. or http or https.What is Related Post Widget?
The term "Related Post" defines it, that means it is post/article which related to the current post/article you are reading on the blog or website. The related post widget is used on website or blog to engage visitors by showing the related articles of the post/article they are reading. For example if a visitor is reading about "Mobile Flashing" topic then the related post starts the work to show any other article of your blog which is related to "Mobile Flashing" Labels and shows it at the end of the post, and you can also set the number of post should appear in the related post widget.
 |
| Stylish Related Post Widget For Your Blog - Related Post CSS, HTML and JavaScript Code |
As I said before the "Related Post" widget used for user engagement by showing related articles to the users that he or she is interested to read this. If you design the related post widget or use customized widget then this will be increase the user engagement with improved look and feel. So why are you waiting just follow the below steps and use CSS and HTML code on your blog and make your blog unique.
Read Me Once:
How To Unlock Mi Account?Blogger Tutorials For Beginners.
FRP Unlock Tutorials for All Android Smartphones.
Computer Basic Tutorials.
Steps:
1) Log in to Blogger and Choose the Blog to Edit. (Backup Blog Template before edit)
2) Then go to THEME and Edit HTML, then find </head> and paste the below CSS and JavaScrip code just above it.
 |
| Paste Related Post CSS Code Before </head> Tag Then follow the next Step |
<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:100%;}
#related-posts a{background:#08008c; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-posts h4{margin-top: 5px;background: #fe0000;font:18px Arial;padding:5px;color: #ffffff; text-transform:uppercase; }
#related-posts .related_img {margin:5px; border: solid white 2px;object-fit: cover;width:137px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-title {color: #ffffff;text-align:center;text-transform:none;padding: 0px 5px 10px;font:16px Arial;width:137px; height: 150px;}
</style>
<script type='text/javascript'>
//<![CDATA[
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/AVvXsEhBC8j1QTnXGb-k6AQ-a1G1vvRQkafRnZ1bhqy1HQ8SsBc2TsYM9tzrgD4ywFJ6xH2pmn3pXsPWp99vg5hPvhGYmLUan5jXNBWiKu3yTOYn_YU353aYo9HJVG9lMFJmrJtdXFPgzvdzoQAe/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>120)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(){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('<h4>'+relatedpoststitle+'</h4>');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 End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:100%;}
#related-posts a{background:#08008c; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-posts h4{margin-top: 5px;background: #fe0000;font:18px Arial;padding:5px;color: #ffffff; text-transform:uppercase; }
#related-posts .related_img {margin:5px; border: solid white 2px;object-fit: cover;width:137px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-title {color: #ffffff;text-align:center;text-transform:none;padding: 0px 5px 10px;font:16px Arial;width:137px; height: 150px;}
</style>
<script type='text/javascript'>
//<![CDATA[
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/AVvXsEhBC8j1QTnXGb-k6AQ-a1G1vvRQkafRnZ1bhqy1HQ8SsBc2TsYM9tzrgD4ywFJ6xH2pmn3pXsPWp99vg5hPvhGYmLUan5jXNBWiKu3yTOYn_YU353aYo9HJVG9lMFJmrJtdXFPgzvdzoQAe/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>120)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(){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('<h4>'+relatedpoststitle+'</h4>');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 End-->
3) Now find the place where you want show the related post widget on your blog or website, in My case I used it after Author Profile. So find <data:post.authorAboutMe/> and paste the below HTML code just after it.
 |
| Related Post Widget HTML Code Paste After Author Profile |
<!-- Related Posts with Thumbnails HTML 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>
<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:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>You Might Also Like:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails HTML Code End-->
<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=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>You Might Also Like:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails HTML Code End-->
Now save the Template and visit your blog post to see the stylish Related Post Widget that implemented on your Blog or Website. So in this way you can add a Related post widget on your blog and here you can also find the Related post widget CSS, JavaScript and HTML code for your Bog. Thanks for visit this blog and please keep visiting this Knowledge Sharing Website www.FreeComputerTricks.in.
Please Share Your Thoughts