Recommended Post Slide Out Widget For Blogger/Blogspot

In this post, you'll get to know how to add a recommended post slide out widget for Blogger blogs. This blogger widget slides out at the end of a post, recommending a random post for your readers. Just like the sliding recent post widget and popular post widget for blogger, the slide out recommended post widget in your blog can increase its pageviews and reduce the blog's bounce rate. This is because there is interlinking of one post to another. And with the slide out movement, it is easy to get the attention of your readers. Below are the guidelines on how to add recommended post slide out widget in your blog.

Also Read:  Static Facebook Popup Like Box Widget For Blogger
                     Square Popular Posts Blogger Widget with Rotating Effect
                     Floating Social Share Button For Blogger

How to add Recommended Post Slide Out Widget

How to Add Recommended Post Slide Out Widget In Blogger

First,we'll add this code snippet in our template, to do this:
  • From your blogger dashboard, navigate to 'template'.
  • Click on 'edit html'.
  • Click inside your template, using ctrl+F keys search for any of these tags 
<data:post.body/>
      or
<p class='post-footer-line post-footer-line-1'>
      or search for
<div class='post-footer-line post-footer-line-1'>
  • Copy this code and paste 'below' any of these tags.

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='hlslidein_place_holder'></div>
</b:if>

Next, you'll add the recommended post widget as a gadget on your blog, to do this:
  • From your blogger dashboard, navigate to 'layout'.
  • Click on 'add a gadget'.
  • Select 'html/javascript' from the popup options.
  • Copy the code below and paste in the text field.


<style>
    .ht-title-one {border-bottom: 1px solid #808080; font-weight: bold; font-family: Arial; font-size: 18px !important; letter-spacing: none !important; color: #101010 !important;}
   #hlslidein img {
    -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
    width: 70px !important;
    height: 70px !important;
    }
    #hlslidein img:hover {
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;  rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
    #hlslidein{
z-index:500;
width:390px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #000;
position:fixed;
right:-430px;
bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;
-webkit-box-shadow:-2px 0 5px #aaa;
box-shadow:-2px 0 5px #aaa;
font-family:Arial, Helvetica, sans-serif;
}#hlslidein p{
font-size:12px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#hlslidein_title{
color:#c0c0c0;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;   
}
#hlslidein a,#hlslidein a:hover,#hlslidein_title{
text-decoration:none;
color:#808080;
}
    #hlslidein a:hover {color: #000;}
#hlslidein .close,#hlslidein .expand,#hlslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;
font-size:17px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
    margin-top: -5px;
}
#hlslidein .help{
right:35px;
}
#hlslidein_title,#hlslidein_image{
float:left;
width:80px;
}
#hlslidein_title{
width:290px;
}</style>
<div id="hlslidein" style="display:none;"> <div class="expand">^</div> <div class="close">X</div> <p class="ht-title-one">You May Also Like</p> <div id="hlslidein_image"></div> <div id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i ){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://dl.dropboxusercontent.com/s/dwqlxb9ukrr2ddp/js%20recommended%20for%20you.js",function(){},"hl-out-slide")},"jQueryjs")} </script>

  • Save the gadget. View a post, scroll to the end of the page and you'll see widget you just added.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments