How to Install the Slide Box recommendation on Blogger Blog

The next tutorial, I will share a tutorial “ How to Install Slide Box recommendation on Blogger Blog “ Install widgets slide box recommendations based label that will appear on the right blog is very easy and suitable for news or blog theme can also be installed on a personal blog. In addition to installing this widget will give you the option to visitors to open another article which he is charming and helpful.

The workings of this widget is similar to the widgets related post regular blog article attached below, which will bring up a few related posts based label.

For those of you who want to install the widget slide box these recommendations, please see the tutorial How to Install Slide Box Recommendation Blog below:

1. Log in to Blogger >> Open Template> Add the code below before ]]></ b:skin> or </ style>

CSS - Go Widget

/* Recommendations Widget – Go Widget*/

#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}

2. Then copy the code below before the </body>

Java Script - Go Widget

<b:if cond='data:blog.pageType == "item"'>

//<![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>

3. Next find the <data:post.body/> and add the following code just below the code <data:post.body/>

HTML - Go Widget

<b:if cond='data:blog.pageType == "item"'>

<span style='float:left;margin:0 15px;'>We Recommendation for you</span>

</div>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 0,

titleLength: "auto",thumbnailSize: 45,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}};

</script>

</div>

</b:if>

Or it could also be added on top of the code </b:includable> post like this:

HTML - Go Widget

<b: includable id = 'post' var = 'post'>

...

<- PUT THE CODE HERE ->

</ b: includable>

numPosts: 2: Number of posts that will be shown, if you add a post you must also set the height widget slide box

4. Save the template and see the results

See demo

May be useful…