How To Add Slide Out Recommendation Posts Box Widget

Hello Folks,Today We are going to explain,How to Add Slide Out Recommendation Posts Widget In Blogger Template. Recommendation Blogspot gadget is based on blog labels which will visible on the right side of the blog or website. However you guys are must be using related posts widgets, random posts gadget , recent posts tool but try this recommendation widget which is very useful to add on any blog and it will enhance the view of your website page. In this Recommend box widget we can share 2 or 4 articles but that definitely going to look bad and then there will be no difference between related posts widget in below post footer or sidebar.So that's why we have change it's value to 2 posts on recommendation and that is now default value for this widget.So whenever visitor will scroll your website or blog page this widget slide out from the right side and display 2 articles related to the posts in front  of the visitors. And there is chance for your another content that might be going to be view.

Demo

See the Pen Slide Out Recommendation Box Widget For Blogger by BloggersStand (@bloggersstand) on CodePen.

This recommendation slide out posts widget box is different from others boxes.In addition to instaaling this widget in your website or blog will give you the options to view the another article of your blogger website and that might be very helpful.Like this you will surely going to increase the pageviews and increase the time given by the visitors on the page.So let's skip the tutorial we will again add some words if something important hit in my mind..Till then to grab this recommendation box widget follow the steps mentioned below.

Install Recommendation Sliding Box Widget For Blogger Template

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

/* Slide Out Recommendation Widget By Www.BloggersStand.Com */ #chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,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,a#chslidingbox-close{margin-right:15px} .chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important} .chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px} .chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0} .chslidingbox-container >div >span{font-size:14px} .show{bottom:84px} .hide{bottom:-145px} .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 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:130%;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}

Step 5. Now search for </body> tag and copy the below java script and paste it just before </body> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

Step 6. Now Search for <data:post.body/> and copy the below HTML code and paste is just below(after) <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://googledrive.com/host/0B58fhAmOxE7ENGFsdnlhZFZoWm8' type='text/javascript'></script>     
</div>
</div>
</b:if>

Step 7. Now Save your template..Done !