How to Install Recommended Post Slide Box on Blog | dn420

welcome everyone today we will know about How to Install Recommended Post Slide Box on Blog 

In the next tutorial, Dn420 will share a tutorial on How to Install a Recommendation post Slide Box on a Blog.

What is Recommended Post Slide Box on Blog?

Installing a recommendation slide box widget based on a label that will appear on the right of the blog is indeed very easy and suitable for news-themed blogs or can also be installed on a personal blog. In addition, installing this widget will give visitors the option to open other articles that they find interesting and useful.

Why do we need to use Recommended Post Slide Box on Blog?

The way this widget works is almost the same as the related post widget that is usually installed under blog articles, which will display several related posts based on labels.

For those of you who want to install this recommended post slide box widget, please flow to the tutorial carefully How to Install a Recommendation Slide Box on the Blog below:

How to Install Recommended Post Slide Box on Blog?

•  Login to Blogger Dashboard > Then Open Template > Add the code below before </head> tag

<b:if cond='data:view.isPost'>
<style>
/* Widget Recommendation */
#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}
</style>
</b:if>

• After that copy the code below before </body> tag

<b:if cond='data:view.isPost'>
<script>
//<![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>

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

<b:if cond='data:view.isPost'>
<div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'>Rekomendasi Untuk Anda</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://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sliderekomendasi.js' type='text/javascript'/>         
</div>
</div>
</b:if>

Or it can be added above the </b:includable> post code like this:

<b:includable id='post' var='post'>
...
...
...
<-- PUT CODE HERE -->
</b:includable>

numPosts: 2: The number of posts that will be displayed, if you add a post you must also set the height of the slide box widget code

• At last, Save the theme and see the result carefully.

Conclusion:

Thanks for reading this How to Install Recommended Post Slide Box on Blog | dn420 post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.

Go to Link