Recommended Post Slide Out Widget for Blogger

After a long time I am sharing a post on Blogger Widgets. The last post that I shared to my users was Embedding Facebook Public Post on Blog Post and also if you keep regular track of this website than you were also familiar with some cool CSS download buttons for Blogger users. Today, I will show you how to insert a recommended post widget on Blogger blogs. It's always good to spice up users and visitors with all the interesting post of your blog. This widget will keep your blog visitors glued with your blog post and also if you something very interesting for that users than the user will not have to leave your blog post and he/she will start liking your blog but the condition is that your blog must have some cool post that can interest your visitors. Always try to link your new post with the old one that is related to the article you're writing and avoid unnecessary links and advertisements on your blog.

This widget will come or slide out from the right when user reaches the particular point of your blog (For Eg. - When the post ends). The widget will show related post on the Recommended Post Slide out Widget which will be fetched from your blog's feed. The widget will contain one post of your blog which will be fetched randomly from your blog's feed. And the positive point of this widget is that it will not affect your pages loading time and you will enjoy faster loading of post of your blog as it was before adding the widget. Now let's see how to add this widget on your Blogger blog in a very easy way step by step.

• At first sing in to your Blogger Account and click on the blog title on which you want to add this widget.
• Now go to the Layout Section of your Blog. You're navigating to Blogger Dashboard > Layout. In the Layout section you'll see a link with title Add a Gadget.
• After clicking on add a gadget, you'll see a popup which will look something like the image given below.

Click on HTML/JavaScript Widget

• Now click on widget which is named HTML/JavaScript and after that you will be redirected to a new page from that popup, you can see the image below.

Add the Code inside the Content

• Just add the following lines of codes on the Content box and than click on Save button.

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

• Great! You have just added recommended slide out widget on your Blogger blog.

After adding the widget see any post of your blog and scroll down the end of the page to see the recommended post widget sliding out. At this time the widget will slide out only when the user scrolls at the very bottom of your post which is not a good idea as large group of users don't want to scroll until the page ends.

To make the recommended post widget to slide out after the end of the post and not the end of the page we will need to create an element at the end of the post from your Template with id hlslidein_place_holder which will initiate the widget to slide out If you would like the recommended post widget to slide out when your blog visitor finishes reading of your post or he/she comes to the end of the post and not the page than follow these steps.

• First, navigate to Blogger Dashboard > Template. In the template page you will see edit HTML button. Click on Edit HTML button.
• Now after clicking Edit HTML button you have to wait for some time and after the loading finishes you will see many codes. You will not need to modify the codes.
• Press anywhere in the code box and after that click CTRL+F to open the Blogger search box which you can use to search any codes of your Template.
• Search for the following code on your Templates' HTML.

<data:post.body/>

Instead of the above code you can search for the following codes too.

<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

• Immediately after the above code (the code you searched in the above step) paste the code given below. 

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

• Preview your template and if everything looks fine than save your template by clicking Orange Save Template button.

If you would like to customize the CSS of this widget than go again to the Layout section from your Blogger Dashboard and than click on edit button of the recommended post widget. Everything between <style> and </style> dominates the design to the recommended post widget.

If it appears that some elements or texts, iframes are coming above the recommended post widget than you can increase the z-index by editing the CSS code of the widget. By default it has a very large z-index of 500 and if you have any element which contains larger z-index than 500 than it will come above this widget and to make this widget to stay at top you will need increase the z-index more than 500. If you don't know how to increase the z-index than follow the following steps.

1. Go to Blogger Dashboard > Layout.
2. Now click on edit button of the Recommended post slide out widget.
3. After that press CTRL+F and search for z-index:500.
4. You can increase the z-index by increasing the value 500. You can cahnge the value to 999 or any value larger than the element which is coming above the recommended post widget.

That's All! I hope you like this recommended post slide out widget on your Blogger blog. If you need help than feel free to ask me on comment.