How To Add Related Post Widget Below Every Post In Blogger
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8d8ktM_gQpNtOXNenkHZmOPSuh7tBjo5Opp4JLQbhe_N6NtNv4RW9xSVRtmpTlvdSAGyY16zHNUx-ftDyzlHk6jJpdN-OGhaw2beTaEJn-WqXCFA_gVOsqtH-EgDCInxQcnky2H6Qd_I/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 == "item"'>
<div id='related-posts'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzBk_U-WX3etgaB_bhym540W7ZLot41IWjTA0MgvlhwWEEhlBCrbFg7ZTmLZzDGRbIRVfrXHoVOUugHiZ1PUvGVQOLfJRYhcU8n_fTxLlcE7HI1YdgY6iYf2ga1-0BGBGU500qbkJTF9x/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.
No comments