Why To Use Related Post Widget?
Related post articles helps visitors to larn things inwards depth. For Example, a user landed on an article though search engine piece reading the whole article he saw a List of “Related Post” out of which he choose i to read in addition to this procedure volition maintain on croak along until he gets bored. On i hand, it increases the appointment of users. While on the other hand, it reduces the bounce rate. So, a individual gets dual payoff yesteryear doing slight changes.
How The Related Post Widget Looks?
The Widget is non similar others because it has or hence professional person in addition to well-crafted functionality. It has a Tooltip functionality that volition display the Post championship when someone volition hover over the Related Post Thumbnails. We accept attached a Screenshot below hence anyone tin easily sympathise how well-crafted this widget is.
How To Install MBL Thumbnail Related Post Widget alongside ToolTips
This weblog has over 9000+ Bloggers who belongs to dissimilar platforms. Therefore, nosotros ever tried to arts and crafts our tutorial inwards such a agency that every individual tin sympathise either he belong to Technical, or nontechnical departments. To install this Widget follow the next steps correctly.
- Go to Blogger >> Template.
- Press Edit HTML >> Proceed.
- Select (Tick) the “Expand the Widget” Box.
- Search for ]]></b:skin> and higher upwards it glue the next CSS3 Coding.
/* MBL Thumbnail Related Posts With ToolTips --- */
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;
margin: 0;
display: block;
border-right: 1px venture #fff;
border-bottom: 1px venture #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}
- Now Once i time again inside your template, search for Following Coding.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
- Once yous notice a similar coding, merely below it glue the next coding.
<div id='related-posts'><b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[var ry='<h3>Related Posts</h3>';rn='<h3> No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' inwards d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' inwards d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetI9PQhdZXtkT6hx_j6Ns-FDFWk0g-EYgSIxPxRSO_FXURSFyQFSTqpJdJzXdkWHKjAVNiW7fxGGrrtyf34A27320mnkKrfwhLKBiPs8ufVDlaDqYN6PS-NE32N-exeMPLO-Wcxu2SbHk/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="Adding a Related post widget to a weblog has ever proved to hold upwards extremely beneficial for th Tooltips Related Post Widget For Blogger With Thumbnail" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};//]]></script><b:loop values='data:post.labels' var='label'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script></b:if></div><div class='clear'/>
Customization:
- To increment the issue of related articles Search for maxresults=6 in addition to supervene upon “6” alongside your desired issue of related articles that yous wishing to see.
- To alter the Widget in addition to pinnacle of the thumbnails supervene upon the 4 98px alongside your desired numbers.
All Done: That’s all hitting the “Save template” button. Now catch your weblog in addition to experience the difference. Try to Hover over the Related Thumbnail in addition to relish the uniqueness.
From The Editor’s Desk:
This was our minute personalize widget that nosotros accept shared to our whole readers. One of our loyal readers requested to part our custom related post widget, in addition to nosotros were unable to reject his request, because without making your readers Happy yous can’t run a blog. If yous facial expression upwards whatsoever difficulty experience gratis to ask. Take a lot attention of your dearest ones till hence peace, blessings in addition to happy blogging.
No comments:
Post a Comment