How To Add Together 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 weblog labels which volition visible on the correct side of the weblog or website. However y'all guys are must endure using related posts widgets, random posts gadget , recent posts tool but try this recommendation widget which is rattling useful to add together on whatever weblog as well as it volition heighten the persuasion of your website page. In this Recommend box widget nosotros tin portion two or iv articles but that definitely going to await bad as well as thus at that spot volition endure no deviation betwixt related posts widget inward below ship service footer or sidebar.So that's why nosotros accept modify it's value to two posts on recommendation as well as that is forthwith default value for this widget.So whenever visitor volition scroll your website or weblog page this widget slide out from the correct side as well as display two articles related to the posts inward front end  of the visitors. And at that spot is peril for your around other content that mightiness endure going to endure view.

Demo

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

This recommendation slide out posts widget box is dissimilar from others boxes.In add-on to instaaling this widget inward your website or weblog volition plough over y'all the options to persuasion the around other article of your blogger website as well as that mightiness endure rattling helpful.Like this y'all volition sure going to increase the pageviews as well as increase the fourth dimension given past times the visitors on the page.So let's skip the tutorial nosotros volition in 1 lawsuit again add together around words if something of import striking inward my mind..Till thus to catch this recommendation box widget follow the steps mentioned below.

Install Recommendation Sliding Box Widget For Blogger Template

installation steps:

Step 1. Log inward to your Blogger draw of piece of occupation concern human relationship as well as 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 as well as glue it only earlier the ]]></b:skin> or </style> tag.

/* Slide Out Recommendation Widget By Www..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 bridge 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 as well as re-create the below coffee script as well as glue it only earlier </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 re-create the below HTML code as well as glue is only 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 !