Add Post Slide Out to Blogger

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

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.

<span id="summary5487934719045884650"><pre class="code"><span id="summary5487934719045884650"><script>var bpslidein_custom_css=true;</script></span><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 ]]>.

<span id="summary5487934719045884650"><pre class="code">#bpslidein{z-index:5;width:400px;height:100px;padding:10px;

background-color:<span style="color: magenta;">#fff</span>;

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:<span style="color: lime;">#555;</span>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.