Recommended Slide Box Widget on Blogger.

Recommended Slide Box Widget on Blogger.

How to Install a Recommended Slide Box on a Blogger|| Best and Responsive Slide Box  widgets For Blogger(New version)


Recommended Slide Box Widget For Blogger.

Hey, Welcome to a new article about Blogger Widget,if you are looking for best blogger Widgets than this article is only for you.


The next tutorial, BPF will share a blogger post on How to Install a Recommended Slide Box on a Blogger?

In this article you will know about what is Recommended Slide Box on a blogger?,How it work on blogger and How to install on blogger?



Table's of Contents
  • What is Recommended Slide Box widget on Blogger?
  • How it work on Blogger?
  • How to install on Blogger?
  • Final decision 

So, Don't be waste time,Late Start!

  • What is Recommended Slide box Widgets on Blogger?
Installing a recommendation slide box widget based on the label that will appear on the right of the blog is very easy and suitable for blogs with news themes or can also be installed on personal blogs. In addition, installing this widget will give visitors the option to open other articles that they find interesting and useful.


  • How it work on Blogger?

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.

Slide box is most important for every blogger. Because it recommended to users to see latest post or article without type any word in search bar. It notified to users with New post.

When users open any post and they Scrolling page down instantly they see some magic like this in the corner of any post.
Photo



For friends who want to install this recommended slide box widget on their blogger, please refer to the article How to Install a Recommended Slide Box on the Blogger.

For this you need to follow some below steps Carefully:

  • How to Install a Recommended Slide Box on a Blog


1.Loging to Blogger with your gmail account and Go Scroll down the page》You will see template option 》Click it》You will see some option,first backup your templates than click Html editor section》And add the below code before </head>
<b:if cond='data:view.isPost'> <style> /* Widget Rekomendasi */ #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>


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


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

 

3.Next find the code <data:post.body/>and add the code below just below the code<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 you can also add it above the </b:includable>post code like this below:


<b:includable id='post' var='post'> ... ... ... <-- LETAKKAN KODE DI SINI --> </b:includable>

numPosts: 2: The number of posts that will be displayed, if you add a post you also have to adjust the height of the slide box widget

 

Also Read

》 Delay Image Loading Before Scrolling Pages in Blogger

》 How to add Gradient Email Subscription Box on Blogger 

》Add sitemap with Gradient style on blogger

》Best Ads ready and Responsive templates for Blogger



4. Save the theme and see the results.


Result

Final

That's its from Blogger plugin Freeon How to Install a Recommended Slide Box on a Blog , hopefully this is useful. If you will any kinds of problems with this code please fill free to contact us.

Thanks...

Note:All code provided by Arlina Code.