Recommended post widget for blogger

The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries. It's both useful for you (can improve your Click Through Rate (CTR) ) and for your blog visitors too.

Demo

How to add the Recommended Post Slide out Widget

1. Log in into your Blogger account, then go to Design (or Layout) > Page Elements
2. Click on Add a Gadget Link
3. Choose "HTML/JavaScript" option
4. Paste this code inside the empty box:

<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</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://yourjavascript.com/30910102822/recemmend post.txt.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://truebloggertricks.blogspot.in/2012/08/recommended-post-widget-for-blogger.html" target="_blank"></a>

5. Save The Widget.
6. Go to Edit HTML > Check the "Expand Widget Template" box
7. Search (CTRL + F) for the following code :

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

OR

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

OR

<data:post.body/>

Immediately below any of these lines, add the following snippet

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

Now when the reader scrolls down to this div, the slide will open up.

8. Save your template. And that's it!