How to Add Related Post Slide Out Widget for Blogger

Many people put link of older or related posts in new posts. Now it is an old fashion. For this purpose many Blogger widget developers made many related posts widgets recommended posts widgets and much more. Today I am going to talk on related posts because I have attractive and decent related posts widget for Blogger.

Why to Use Related Post Slide Out Widget for Blogger   

Interlinking is an old thing. In old days people put links of older posts in their posts. Many newbies have question in mind that why everyone put old link in new posts. So here is the answer people put older posts links in new posts to increase there page views as well as to decrease the bounce rate. Another factor to put older links is that if any reader miss the previous article then he will get it.

Related Post Slide Out Widget is a very decent and cool widget it gives a professional look to your blog because manual interlinking makes your blog a mess of links. With the help of this widget you can decrease the bounce rate of your blog as well as increase the page views. When ever a person scroll down on any of your post then a box slide out with Related post link and thumbnail which gives a cool impression on every visitor. 

How to Add Related Post Slide Out Widget in Blogger

1. Go to Blogger dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.

2.  Paste the following code in HTML/Javascript box.

<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Related Post</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://widgetbloggiks.googlecode.com/svn/trunk/relatedposts.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://umerprince.blogspot.com" target="_blank"></a>

3. Click on save and then go to your Template tab >> Edit HTML.

4. Tick the expand widget box.

5. Search any of the the following three codes.

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

OR

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

OR

<data:post.body/>

6. After searching of the above three codes paste the following code just below any of these three codes.

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

7. Save your template and then scroll to the bottom of any post to check it.

Last Words

Hope you guys like this decent and cool widget. Do share your ideas of changes and feedback. If you need any assistance the let us know. Subscribe to UP to get free email updates directly to your inbox.

Happy Blogging............!

Credits =  http://www.bloggiks.com