How To Add Recommended Post Slide Out Widget To Blogger

HTML And CSS Tricks Widgets and Plugins

You know those popup messages that slide out from the bottom right corner once you've almost
reached the bottom of the page? Well, they used to be available only on WordPress but not anymore; now Blogger users can enjoy it too! 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.

Don't Miss: How to add beautiful social subscription widget in blogger?

How to add the Recommended Post Slide out Widget

1. Log in into your Blogger account, then go to Layout
2. Click on Add a Gadget Link:

3. From the pop-up window, scroll down and 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(scri pt.onload!=null)previous_callback=script.onload;
sc ript.onload=script.onreadystatechange=function()
{var newcallback;if(previous_script&&previous_callback) =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://mybloggertutorials.blogspot.com/
2014/05/add-recommended-post-slide-out-widget.html",function(){},"hl-out-slide")}
,"jQueryjs")}
</script>

5. Now Save the widget:

6. Next, go to Template, and click on the Edit HTML button:

8. Search (using 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/>

And add immediately below any of these lines, 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.

Recommended For You: Where To place Adds in any site or blog?

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

About Author

Hi! I am Sajad Metlo, SEO expert and web developer. The purpose of creating this blog is to provide highly professional tips, top quality Tutorials, Practical SEO tips and methods to earn online.

Subscribe via email

Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.

How To Add Recommended Post Slide Out Widget To Blogger

4/ 5

Unknown

Unknown 5/19/2014 comments