HOT!Join Our Community For Exclusive Blogging IdeasClick Here

How To Add Related Post Widget Below Every Post In Blogger


Today's topic is about How to add related post widget below every post in blogger, Bloggers always wonder that related post widget is just fancy thing to add but they don't know that it helps in reducing bounce rate which will give your blog traffic a initial boostup. Because it helps your reader to find a relevant post related to that topic and also make them stick with your blog for a long period of time.There are lots of other related post widget but most of them were badly coded or not highly targeted to show relevant post. Lets move further and see How to add related post widget below every post in blogger. You can check a live preview of the related post widget by clicking the button below.

Why Related Post Widget Is Important?

sometimes you may want to do something extra and attractive with your blog to attract new visitors and gain more traffic for extra revenue. Making your blog visitor to stay for a long period of time is kind of tough job but that is extremely useful for your blog, it will help you to reduce your bounce rate very quickly, the more a visitor will stay on your site, the more chances of getting good revenue through ads and adsense.

What Is Special In Our Widget ?

OK, everyone claims that they have the best thing in the market and that is normal but we claim that we have the thing which no one has, Yes its true. Our widget is professionally optimized to show targeted posts and it loads with Ajax that makes it fast loading !! Yepieee ( Very Fast Loading ). Also the script which we are using will showcase your thumbnail in very high quality, So no more blurry images.

Let's Start Step-1 ( Adding CSS

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Related Post By Sorabloggingtips.com ######################### */
#related-posts {
margin-bottom: 10px;
padding: 10px 0;
}
.related li {
width: 31.276%;
display: inline-block;
height: auto;
min-height: 184px;
float: left;
margin-right: 18px;
overflow: hidden;
position: relative;
}
.related li h3 {
margin-top:0;
}
.related-thumb {
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 2px;
}
.related li .related-img {
width: 100%;
height: 180px;
display: block;
position: relative;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important;
}
.related li .related-img:hover {
-webkit-transform: scale(1.1) rotate(-1.5deg)!important;
-moz-transform: scale(1.1) rotate(-1.5deg)!important;
transform: scale(1.1) rotate(-1.5deg)!important;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important;
}
.related-title a {
font-size: 14px;
line-height: 1.4em;
padding: 10px 0 4px;
font-weight: 500;
color: #fff;
display: block;
text-shadow: 0 .5px .5px rgba(34,34,34,0.3);
}
.related li:nth-of-type(3),
.related li:nth-of-type(6),
.related li:nth-of-type(9) {
margin-right: 0;
}
.related .related-tag {
position: absolute;
top: 15px;
left: 15px;
background-color: #f1a18e;
color: #fff;
text-transform: uppercase;
font-weight: 400;
z-index: 5;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
}
.related .related-thumb .related-img:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
background-size: 100% 100%;
opacity: .8;
}
.related-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.related-content {
position: absolute;
bottom: 0;
padding: 15px 15px 11px;
width: 100%;
line-height: 1.2em;
box-sizing: border-box;
z-index: 2;
}
.related .related-content .recent-date {
color: #ccc;
font-size: 12px;
font-weight: 400;
}
.recent-date:before, .p-date:before {
content: '\f017';
font-family: fontawesome;
margin-right: 5px;
}

Step-2 ( Adding HTML

In the template, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
              <data:label.name/>
            </b:if>
          </b:loop>
        </b:if>
      </div>
<a href="http://www.soratemplates.com/" id="mycontent" title="Blogger Templates">Sora Templates</a>
 </b:if>

Note :- If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove thore lines which are marked in red from the above code.

Step-2 ( Adding SCRIPT ) - Most Important !!

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<script type='text/javascript'>
//<![CDATA[

var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "http://2.bp.blogspot.com/-IO-XEI1LgEs/VmPNKFp0BhI/AAAAAAAACOg/_JrYHMBXV5w/s1600-r/nothumb.jpg";
var related_number = 3;

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('w a=["\\y\\c\\s\\f","\\l\\C\\b\\b\\i\\e\\l\\r\\m\\e\\c\\e\\l\\i\\b\\C\\d\\u\\f\\c\\l\\t\\l","\\1I\\d\\f\\c\\x\\N\\e\\m\\h\\t\\k\\h\\t\\e\\j\\g\\k\\r\\c\\1H\\s\\d\\X\\t\\g\\b\\e\\u\\f\\c\\e\\x","\\v\\b\\c","\\N\\e\\m\\h\\r","","\\q\\i\\k\\B\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\o\\p","\\f\\b\\h\\v\\c\\y","\\b\\h\\c\\g\\F","\\C\\b\\b\\i","\\f\\k\\h\\Q","\\g\\b\\f","\\d\\f\\c\\b\\g\\h\\d\\c\\b","\\y\\g\\b\\C","\\1v\\c","\\c\\k\\c\\f\\b","\\c\\b\\g\\s","\\j\\d\\c\\b\\v\\m\\g\\F","\\r\\u\\A\\f\\k\\e\\y\\b\\i","\\e\\u\\A\\e\\c\\g\\k\\h\\v","\\n","\\1F\\n","\\j\\m\\h\\c\\b\\h\\c","\\q\\i\\k\\B\\p","\\y\\c\\c\\r\\H\\l\\l\\E\\E\\E\\G\\F\\m\\u\\c\\u\\A\\b\\G\\j\\m\\s\\l\\b\\s\\A\\b\\i\\l","\\k\\h\\i\\b\\X\\2f\\C","\\y\\c\\c\\r\\e\\H\\l\\l\\E\\E\\E\\G\\F\\m\\u\\c\\u\\A\\b\\G\\j\\m\\s\\l\\b\\s\\A\\b\\i\\l","\\u\\g\\f","\\s\\b\\i\\k\\d\\1v\\c\\y\\u\\s\\A\\h\\d\\k\\f","\\q\\d\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\k\\s\\v\\o\\n\\y\\g\\b\\C\\x\\o","\\o\\n\\e\\c\\F\\f\\b\\x\\o\\A\\d\\j\\Q\\v\\g\\m\\u\\h\\i\\H\\u\\g\\f\\2h","\\Z\\n\\h\\m\\t\\g\\b\\r\\b\\d\\c\\n\\j\\b\\h\\c\\b\\g\\n\\j\\b\\h\\c\\b\\g\\Y\\A\\d\\j\\Q\\v\\g\\m\\u\\h\\i\\t\\e\\k\\1j\\b\\H\\n\\j\\m\\B\\b\\g\\o\\l\\p","\\q\\k\\s\\v","\\e\\g\\j","\\d\\c\\c\\g","\\k\\s\\v\\H\\C\\k\\g\\e\\c","\\C\\k\\h\\i","\\Z\\n\\h\\m\\t\\g\\b\\r\\b\\d\\c\\n\\j\\b\\h\\c\\b\\g\\n\\j\\b\\h\\c\\b\\g\\Y\\A\\d\\j\\Q\\v\\g\\m\\u\\h\\i\\t\\e\\k\\1j\\b\\H\\n\\j\\m\\B\\b\\g\\o\\p\\q\\e\\r\\d\\h\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\m\\B\\b\\g\\f\\d\\F\\o\\p\\q\\l\\e\\r\\d\\h\\p\\q\\l\\d\\p","\\q\\f\\k\\p\\q\\e\\r\\d\\h\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\c\\d\\v\\o\\p","\\q\\l\\e\\r\\d\\h\\p\\q\\i\\k\\B\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\c\\y\\u\\s\\A\\o\\p","\\q\\l\\i\\k\\B\\p\\q\\i\\k\\B\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\j\\m\\h\\c\\b\\h\\c\\o\\p\\q\\y\\1a\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\f\\d\\c\\b\\i\\t\\c\\k\\c\\f\\b\\o\\p\\q\\d\\n\\y\\g\\b\\C\\x\\o","\\o\\p","\\q\\l\\d\\p\\q\\e\\r\\d\\h\\n\\j\\f\\d\\e\\e\\x\\o\\g\\b\\j\\b\\h\\c\\t\\i\\d\\c\\b\\o\\p","\\q\\l\\e\\r\\d\\h\\p\\q\\l\\y\\1a\\p\\q\\l\\i\\k\\B\\p\\q\\l\\f\\k\\p","\\q\\l\\i\\k\\B\\p\\q\\i\\k\\B\\n\\j\\f\\d\\e\\e\\x\\o\\j\\f\\b\\d\\g\\o\\l\\p","\\1Z\\g\\b\\f\\d\\c\\b\\i\\t\\r\\m\\e\\c\\e","\\e\\c\\F\\f\\b","\\e\\1Y\\2m\\t\\j","\\e\\2n\\2x\\1f\\1f","\\g\\b\\r\\f\\d\\j\\b","\\l\\i\\b\\C\\d\\u\\f\\c\\G\\N\\r\\v","\\l\\s\\2y\\i\\b\\C\\d\\u\\f\\c\\G\\N\\r\\v","\\b\\d\\j\\y","\\G\\g\\b\\f\\d\\c\\b\\i\\t\\k\\s\\v","\\d\\N\\d\\X","\\m\\h\\f\\m\\d\\i","\\s\\F\\j\\m\\h\\c\\b\\h\\c","\\v\\b\\c\\1X\\f\\b\\s\\b\\h\\c\\1d\\F\\2i\\i","\\f\\m\\j\\d\\c\\k\\m\\h","\\y\\c\\c\\r\\H\\l\\l\\E\\E\\E\\G\\e\\m\\g\\d\\c\\b\\s\\r\\f\\d\\c\\b\\e\\G\\j\\m\\s\\l","\\e\\b\\c\\1S\\c\\c\\g\\k\\A\\u\\c\\b","\\n\\1d\\f\\m\\v\\v\\b\\g\\n\\V\\b\\s\\r\\f\\d\\c\\b\\e","\\k\\h\\h\\b\\g\\1V\\V\\1U\\1T","\\1R\\m\\g\\d\\n\\V\\b\\s\\r\\f\\d\\c\\b\\e"];$(a[1q])[a[1r]](J(){w 1b=$(1s)[a[0]]();$[a[1D]]({1Q:a[1]+1b+a[2]+2s,2t:a[3],2q:a[4],2o:J(D){w I=a[5];w T=a[6];1e(w z=0;z<D[a[9]][a[8]][a[7]];z++){1e(w L=0;L<D[a[9]][a[8]][z][a[10]][a[7]];L++){P(D[a[9]][a[8]][z][a[10]][L][a[11]]==a[12]){I=D[a[9]][a[8]][z][a[10]][L][a[13]];2A}};w 1k=D[a[9]][a[8]][z][a[15]][a[14]];w 1u=D[a[9]][a[8]][z][a[17]][0][a[16]];w R=D[a[9]][a[8]][z][a[18]][a[14]],1i=R[a[19]](0,4),1h=R[a[19]](5,7),1g=R[a[19]](8,10),1p=2d[2b(1h,10)]+a[20]+1g+a[21]+1i;w M=D[a[9]][a[8]][z][a[22]][a[14]];w 1w=$(a[23])[a[0]](M);P(M[a[25]](a[24])>-1||M[a[25]](a[26])>-1){w 1c=D[a[9]][a[8]][z][a[28]][a[27]];w S=a[29]+I+a[U]+1c+a[2r]}1z{P(M[a[25]](a[2g])>-1){w K=1w[a[2j]](a[2l])[a[W]](a[2k]);w S=a[29]+I+a[U]+K+a[1t]}1z{w S=a[29]+I+a[U]+2e+a[1t]}};T+=a[2a]+1u+a[2w]+S+a[2z]+I+a[2v]+1k+a[2u]+1p+a[2p]};T+=a[2B];$(a[1q])[a[0]](T);$(a[1G])[a[1r]](J(){$(1s)[a[W]](a[1o],J(z,K){1l K[a[1m]](a[1B],a[1A])})[a[W]](a[1o],J(z,K){1l K[a[1m]](a[1W],a[1J])})})}})});1n[a[1P]]=J(){w O=1L[a[1K]](a[1M]);P(O==1N){1n[a[1O]][a[13]]=a[1y]};O[a[1x]](a[13],a[1y]);O[a[1x]](a[15],a[1C]);O[a[1E]]=a[2c]}',62,162,'||||||||||_0xda40|x65|x74|x61|x73|x6C|x72|x6E|x64|x63|x69|x2F|x6F|x20|x22|x3E|x3C|x70|x6D|x2D|x75|x67|var|x3D|x68|_0x6b2cx5|x62|x76|x66|_0x6b2cx2|x77|x79|x2E|x3A|_0x6b2cx3|function|_0x6b2cx12|_0x6b2cx6|_0x6b2cxe|x6A|_0x6b2cx13|if|x6B|_0x6b2cx9|_0x6b2cx11|_0x6b2cx4|30|x54|34|x78|x3B|x29|||||||||||x33|_0x6b2cx1|_0x6b2cx10|x42|for|x30|_0x6b2cxc|_0x6b2cxb|_0x6b2cxa|x7A|_0x6b2cx7|return|49|window|46|_0x6b2cxd|45|52|this|37|_0x6b2cx8|x24|_0x6b2cxf|60|59|else|51|50|61|54|62|x2C|53|x26|x3F|48|57|document|56|null|58|55|url|x53|x41|x4C|x4D|x48|47|x45|x37|x23|||||||||||38|parseInt|63|text_month|no_image_url|x4F|32|x28|x49|36|33|35|x32|x31|success|43|dataType|31|related_number|type|42|41|39|x36|x71|40|break|44'.split('|')))

 //]]>
</script>

Note :- If you want to display more post or want to change the default image for posts without images into the widget then change the value which are marked in red from the above code.

Conclusion

Congrats !! You have made it. now you have learned that How to add related post widget below every post in blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Adios !! (Goodbye in Spanish).
How To Add Related Post Widget Below Every Post In Blogger How To Add Related Post Widget Below Every Post In Blogger Reviewed by Sora Blogging Tips on October 27, 2016 Rating: 5

No comments:

Powered by Blogger.