Slide in Recommended Related Post Blogger Widget

Hello today we are going to build slide in recommendation related post blogger widget

Preview of slide in recommendation related post blogger widget:

I think you might like this blogger widget.


This blogger widget is very useful and helps in increasing your traffic when this recommendation popup is shown. It grabs user attention showing similar post to that article.

So If you want to create related post slide in recommendation widget in blogger you just follow the steps provided to do that.

Steps to make blogger widget:

1. Go To Blogger Dashboard
2. Then Go to Theme / Template
3. Click Edit HTML Button
4. Now search for <div class='post-footer'>

To Search code in blogger Press Ctrl + F and type or paste the term to search in search bar.

5. Copy the code provided below and paste it just before the tag which we have founded in step 4.

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#box,#side,#sidecontent2,.recent-galeri .gallerytem{position:relative}.recent-galeri{padding:0;clear:both}.recent-galeri:after{content:"";display:table;clear:both}.recent-galeri .gallerytem{display:block;float:left;margin:0 auto 20px;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.05)}.recent-galeri .gallerytem:last-child{margin:0 auto}.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%}.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,.15);border-top:2px solid #a4b0be;transition:all .2s}#footer,.cf:after{clear:both}#chslidingbox,#menu.fixed{position:fixed;z-index:99}.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#eccc68}.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s}#chslidingbox,#credit,#side{background:#fff}#box:after,#box:before{position:absolute;display:inline-block;left:0;height:150px;width:200px;margin:0;top:0}#box{width:93.5%;height:150px;display:block;background:#f6f6f6;margin:0 20px 20px}#box:before{content:'';background:#e6e6e6}#box:after{content:'\f1cb';font-family:FontAwesome;right:0;text-align:center;line-height:150px;color:#bbb;font-size:50px}#side{width:30%;float:right;margin:0;padding:0}#sidecontent2{width:255px;height:200px;margin:0 20px 20px auto;background:#9da9c0}#sidecontent2 span{display:table;color:#fff;text-align:center;margin:auto;padding:20px 0;font-size:25px}#footer{height:300px;background:#3a4c6d}#credit{height:60px;margin:0}#credit span{display:table;color:#9da9c0;text-align:center;font-size:16px;line-height:60px;margin:auto}.cf:after,.cf:before{content:" ";display:table}#menu.fixed{top:0}#chslidingbox{width:100%;max-width:355px;min-height:150px;height:auto;overflow:hidden;border:none;right:-360px;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,.03);transition:all .4s ease-out}.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}a#chslidingbox-close{margin-right:15px}.chslidingbox-title>span>h2{font-size:20px!important;font-weight:400!important}.chslidingbox-container{border:none;float:left;width:100%;height:auto}.chslidingbox-container>div{border:none}.chslidingbox-container>div>span{font-size:14px}.show{bottom:84px}.hide{bottom:-200px}.related-post{font-size:70%}.related-post h4{font-size:150%;margin:0 0 .5em}.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}.related-post-style-2 li{padding:0 10px 10px;overflow:hidden}.related-post-style-2 li:first-child{border-top:none}.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:120%;line-height:normal}a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}</style><script>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),c=$("#chslidingbox-close"),s=$("#chslidingbox-minimize"),o=$("#chslidingbox-maximize");o.hide(),c.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),s.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()}),o.click(function(){i.toggleClass("hide"),$(this).hide(),s.show()})});
//]]>
</script><div class='show' id='chslidingbox'><div class='chslidingbox-title chslidingbox-www'><span style='float:left;margin:0 15px;'>You Might Like this:</span><span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span><span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span><span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span></div><div class='chslidingbox-container'><script type='text/javascript'>
//<![CDATA[
var postthumb = '300'; //This is post thumbnail size
var ytthumb = 'maxresdefault' //This is youtube thumbnail
var nothumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgwLZnzgRLqYFk6CyuRFplD6RcIhrV4yypZ6HTC-3STuii7nSUUTRmow7OFQY-XY75NvMR0HjReH54F-tKHzA1wZNCR5Nq88XKMVlSAM_okEVqsYzIHreRx2Eov-W2UvEBBVkbGcyeh0/s250-Ic42/no-thumbnail.png";  // Url if image if there is no thumb
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=(a=e.feed.entry[l].media$thumbnail.url).replace("/s72-c/","/s"+postthumb+"/").replace("/default.jpg","/"+ytthumb+".jpg");if(e.feed.entry[l].media$thumbnail){var a=e.feed.entry[l].media$thumbnail.url;r=a.replace("/s72-c/","/s"+postthumb+"/").replace("/default.jpg","/"+ytthumb+".jpg")}else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))r=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else r=nothumb;relatedImage[relatedTitlesNum]=r;for(var s=0;s<t.link.length;s++)if("alternate"==t.link[s].rel){relatedUrls[relatedTitlesNum]=t.link[s].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;for(relatedTitles.length;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<div class='gallerytem'><a class='imglink' href='"+relatedUrls[t]+"'><img class='image_left' src='"+relatedImage[t]+"'/><span class='ptitle'>"+relatedTitles[t]+"</span></a></div>":document.getElementById("related_here").innerHTML+="<div class='gallerytem'><a class='imglink' href='"+relatedUrls[t]+"'><img class='image_left' src='"+relatedImage[t]+"'/><span class='ptitle'>"+relatedTitles[t]+"</span></a></div>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script><div id='related_here' class='recent-galeri'/><div id='related_here2'/><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&max-results=7"' type='text/javascript'/></b:loop><script type='text/javascript'> var maxposts=1; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><div style='clear: both;'/></div></div></b:if>

6. Save Theme / Template

Things that you can customise:

Here are some stuff that you can customise route change according to your requirements.
var postthumb = "300";
Replace 300 to you thumbnail size by default it is 300.

var ytthumb = "maxresdefault";
Replace maxresdefault in the above code with the size of youtube thumbnail.

var nothumb = "YOUR_IMAGE_URL";
Replace YOUR_IMAGE_URL with the url of image which you want to set as no image means that this image will be shown if you post has no image.


Conclusion:
You are all done you have just created slide in recommendation related post blogger budget.

I think you like my this post and if you're dead share it with your friends who are blogger users also subscribe to the newsletters of this blog so that you can get notification of all the posts which are to be published in the future.