Add Post Slide out to Blogger Blog

It is very cool widget which display different post of the same label when readers reaches at the bottom of the Post. Many popular websites or Blogs like New York Times, Times Of India uses this cool widget. Originally this cool widget is created by Mary Lou, the author of tympanus.net. He uses jQuery and css like languages for this. I download this widget and make some modification in it so that it can run properly on Blogger template.This widget is highly recommend by most of the web developer because it give an invitation to the reader in a very systematic way. So lets to see how to use this widget on Blog?

How to Add Post Slide Out Widget:-

1. Login to your Blogger Dashboard.
2. Go to Design / Page Element.
3. Click "Add a gadget" from sidebar.
4. Choose HTML / JavaScript.

 

5. Paste the following code inside it.                           
   

<div id="bpslidein" style="display:none;">

<div class="help">?</div>
<div class="expand">+</div>
<div class="close">X</div>
<p>Recommended for you</p>
<div id="bpslidein_image"></div>
<div  id="bpslidein_title">Loading..</div> </div>
<script>
if(document.location.href.split("/").length==6&&document.location.
href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')
var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded
=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function')
{function bp_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.readyS
tate=="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(bp_dom_loaded)
{newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;
script.onreadystatechange=null};
var head=document.getElementsByTagName('head')[0];if(!previous_script
)head.appendChild(script)}}if(typeof bp_domLoaded!='function')
function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.
length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();
bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1
/jquery.min.js",function(){bp_async_loader
("http://recommended-slide-out-for-blogger.googlecode.com
/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")}
</script>

6. Hit "Save" button.
7. Now Go to Design / Edit HTML.
8. Download the full template Before making any changes in it.
9. Click "Expand Widget Template".
10. Find ( CTRL+F) following piece of code in template.

<data:post.body/>

or

<div class='post-footer'> 

11. Paste the following code just below it.

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

12. And Paste the following code just above the ]]></b:skin>.

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;
background-color:#fff;
border-top:3px solid #1616F5;
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;}
#bpslidein p{font-size:11px;text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;
margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein 
a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .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;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

13. Finally save the template and see the result.

 Note:-

• If you find <data:post.body> or <div class='post-footer'> in more than one position then add the above code everywhere you find.
• For changing the background color simply change background-color: #fff; to any desired value.     
• Or you can change the title color by changing color:#555; to any desired value.

 I make its installation as easy as I can by adopting so much steps. So it is a time to apply this tricks on Blog.If you find any difficulty in doing this process then comments always open for that.

If you enjoyed this article then kindly take 5 seconds to share it!!