Recommended Post Slide Out Widget For Blogger/Blogspot

Share on:

In this post, I will show you how to add a recommended post slide out widget In Blogger blogs. This blogger widget slides out at the Bottom of a post Automatically and recommend random post for your readers.

Recommended Post Slide Out Widget For Blogger/Blogspot

This Blogger Widget Can Increase Your Blog page-views and reduce the blog’s bounce rate. Help You to get the attention of your readers Easily.

Below are the guidelines on how to add recommended post slide out widget in your blog.

How to Add Recommended Post Slide Out Widget In Blogger

1. From your blogger dashboard, Navigate to ‘Layout’.
How to Add Recommended Post Slide Out Widget In Blogger
2. Click on ‘add a gadget’.
How to Add Recommended Post Slide Out Widget In Blogger

3. Select ‘html/javascript’ from the options.
How to Add Recommended Post Slide Out Widget In Blogger

4. Copy the below Code and paste in the text field.
How to Add Recommended Post Slide Out Widget In Blogger
<style>.ht-title-one {border-bottom: 1px solid #808080; font-weight: bold; font-family: Arial; font-size: 18px; letter-spacing: none; color: #101010;}
#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;
height: 70px;
}
#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:
Also Read:  Automatic featured Post Slider For Blogger
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>
5. Now , Save ..

How to Show Recommended Post Slide Out In Blogger Post

1. From your blogger dashboard, navigate to ‘Theme’.
How to Show Recommended Post Slide Out In Blogger Post

2. Click on ‘edit html’.
How to Show Recommended Post Slide Out In Blogger Post

3. Click inside your template, search for these tags. ( Use CTRL+F )
<data:post.body/>
How to Show Recommended Post Slide Out In Blogger Post

4. Copy Below Code And Paste After<data:post.body/>
How to Show Recommended Post Slide Out In Blogger Post

<b:if cond=’data:blog.pageType == “item”‘>
<div style=’display:none’ id=’hlslidein_place_holder’></div>
</b:if>
5. Save Theme.
How to Show Recommended Post Slide Out In Blogger Post

Bottom Line :
Like I Hope This Post Help You To Show Recommended Post Slide Out In Below Blogger Post.
Share If You Satisfied..
Keep in Touch.

Leave a Comment