Related post widgets are important and they engage your readers more! Yeas we know that already and there are lots of related post widget for blogger blogs online but everyone can't settle for one kind of design or look. Which is why, I struggled and succeeded in creating a classic and chic looking related post widget out of a simple widget.
This related post widget is responsive and I'm sure it's just perfect for your blog.
What's to love about this Widget?
Below are some amazing features of this widget.
- Classic and chic looking. This type of related post widget is often used on premium blogger templates.
- Doesn't take the whole day to load, if you know what I mean!
- Shows three Related posts under every post in your blog.
- Mobile responsive. Horizontal layout design on desktop and Vertical layout design mobile.
- Elegant enough for your blog!
What Blog is This Widget Suitable for?
I would be honest with you, this widget is most suitable for fashion, personal, lifestyle, recipe and travel blogs but it doesn't matter! Your blog needs this beauty notwithstanding what it's about.
Want a demo? Check out my related post widget. Or Demo blog
Adding It To your Blog
To implement this widget, as usual, backup your blog theme to avoid losing it in case of mistakes.
To back up your theme, navigate to themes in your blogger dashboard and click on "backup and restore" then "Backup theme" when the box pops up.
Close pop up and click on "Edit HTML" use "CTRL F to search for codes"
Search for </b:skin> and paste the CSS code just above it.
# related-posts {
position: static;
float:left;
width:100%;
height: auto;
}
#related-posts h2 {
margin-top: 10px;
background:none;padding:3px;
}
# related-posts .related_img {
margin:5px;
width:150px;
height:100px;
tran sition: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-opaci ty:.7;
-khtml-opacity:.7
}
#related-title:hover {
text-decoration: underline;
}
.related-header-title{
padding-bottom: 3px;
display: inline-block;
margin-top: 0;
font-size: 24px;
font-weight: 400;
font-style: normal;
line-height: 1.25;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
color: #222;
margin-bottom: 20px;
}
@media screen and (max-width : 699px) {
# related-posts {
position: relative;
float:center;
display: block;
width:100% !important;
height: 200px !important.;
}
#related-posts .related_img {
margi n:5px;
width:100% !important;
height:200px !important;
}
#related-title {
color: #333;
line-height: 16px;
padding: 0 10px;
text-align: center;
text-shadow: 0 2px 2px #fff;
width: 100% !important;
}
}
Now search for </head> and paste the co the below just above it
<script type='text/javascript'>
//<![CDATA[
imgr=new Arrayundefined);imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcr6fob0bynO9XEfUajAz5iby444S6t7ZtgVoze6kZtV2c-T0SFMizUVLuPV2eC1qzlfR4dMQGxPTk-YO3eLKNc_BFRpHGXaZ1Hm5DKAg748EnCVyXOH4d16M-AOcX09o7W8L4NuHgxEE/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=170;summaryTitle=25;numposts1=6;numposts2=8;function removeHtmlTagundefinedstrx,chop){var s=strx.splitundefined"<");forundefinedvar i=0;i<s.length;i++){ifundefineds[i].indexOfundefined">")!=-1){s[i]=s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length)}}s=s.joinundefined"");s=s.substringundefined0,chop-1);return s}
function showrecentposts1undefinedjson){j=undefinedshowRandomImg)?Math.floorundefinedundefinedimgr.length+1)*Math.randomundefined)):0;img=new Arrayundefined);ifundefinednumposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}forundefinedvar i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;ifundefinedi==json.feed.entry.length)break;forundefinedvar k=0;k<entry.link.length;k++){ifundefinedentry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}forundefinedvar k=0;k<entry.link.length;k++){ifundefinedentry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.splitundefined" ")[0];break}}ifundefined"content"in entry){var postcontent=entry.content.$t}else ifundefined"summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;ifundefinedj>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!=""))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.splitundefined"-")[2].substringundefined0,2);var m=postdate.splitundefined"-")[1];var y=postdate.splitundefined"-")[0];forundefinedvar u2=0;u2<month.length;u2++){ifundefinedparseIntundefinedm)==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.writeundefinedtrtd);j++}}var relatedTitles=new Arrayundefined);var relatedTitlesNum=0;var relatedUrls=new Arrayundefined);var thumburl=new Arrayundefined);function related_results_labels_thumbsundefinedjson){forundefinedvar 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}catchundefinederror){s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcr6fob0bynO9XEfUajAz5iby444S6t7ZtgVoze6kZtV2c-T0SFMizUVLuPV2eC1qzlfR4dMQGxPTk-YO3eLKNc_BFRpHGXaZ1Hm5DKAg748EnCVyXOH4d16M-AOcX09o7W8L4NuHgxEE/s1600/no-thumbnail.png'}forundefinedvar k=0;k<entry.link.length;k++){ifundefinedentry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbsundefined){var tmp=new Arrayundefined0);var tmp2=new Arrayundefined0);var tmp3=new Arrayundefined0);forundefinedvar i=0;i<relatedUrls.length;i++){ifundefined!contains_thumbsundefinedtmp,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_thumbsundefineda,e){forundefinedvar j=0;j<a.length;j++)ifundefineda[j]==e)return true;return false}function printRelatedLabels_thumbsundefined){forundefinedvar i=0;i<relatedUrls.length;i++){ifundefinedundefinedrelatedUrls[i]==currentposturl)||undefined!undefinedrelatedTitles[i]))){relatedUrls.spliceundefinedi,1);relatedTitles.spliceundefinedi,1);thumburl.spliceundefinedi,1);i--}}var r=Math.floorundefinedundefinedrelatedTitles.length-1)*Math.randomundefined));var i=0;ifundefinedrelatedTitles.length>0)document.writeundefined'<h3 class='Post-footer-widget-title'>'+relatedpoststitle+'</h3>');document.writeundefined'<div style="clear: both;"/>');whileundefinedi<relatedTitles.length&&i<20&&i<maxresults){document.writeundefined'<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');ifundefinedi!=0)document.writeundefined'"');else document.writeundefined'"');document.writeundefined' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');ifundefinedr<relatedTitles.length-1){r++}else{r=0}i++}document.writeundefined'</div>');relatedUrls.spliceundefined0,relatedUrls.length);thumburl.spliceundefined0,thumburl.length);relatedTitles.spliceundefined0,relatedTitles.length)}
//]]>
</script>
For Responsive Templates
If you are using a responsive blogger template, Search for <div class='post-footer-line post-footer-line-2'> and paste the code just below it.
<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=3"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=3;
var relatedpoststitle="<h3 class='related-header-title'>You may also like</h3>";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div>
</b:if>
For Blogger Default Templates
If you are using the default blogger template, in order to make your Related Post widget visible in your mobile view Seaech for <b:includable id="threaded_comments" var="post"> and Paste the code above below directly below it.
Save your theme and check out your new related post widget on a blog post!
Comments
Post a Comment