20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Slide Out Recommendation Posts Box Widget

create stylish unique Recommendation posts box slide out on website scroll for blogger template,install recommended for you ,you might like this widget on right side of the blogspot on scroll auto show hide gadget with close button.
How To Add Slide Out Recommendation Posts Box Widget In Blogger template free
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

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 ! 

3 comments

  1. You Shout give us live demo or preview option for your code/tutorial, before we submit your code in out template.
    (Md. Nahid Khan)
    1. Hello Md.Nahid Khan We are so sorry for this let me arrange the demo for you..just give me few mints let me arrange it :)
  2. Glode it 24 We have added a demo for you.. you can look just below for the demo. Anything else we can for you ? Did you joined us on social media sites you? i think it's a best to stay updated with latest tricks and templates.
    Team : Bloggersstand.com