ADDING A SLIDE OUT RECOMMENDED POST TO BLOGGER BLOG

recommended post

If you’ve been searching for a slide out recommended post for your blogger blog then look no further because you’ll be grabbing one of the finest here.

A slide out recommended post brings out post relating to that particular page post. With this widget, your visitor is surly going to stick around for a longer time. So how does this widget work? When you scroll down to this blog you will see a recommended post rolling out from the right. That is the slide out recommended post widget we are talking about and this widget have been proven to keep readers in your blog for a longer time.

Must Read: JQUERY: ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOG WITH HOVER EFFECT

Why do you need this widget? There are many reasons but to mention a few. 1. It helps in decreasing your bounce rate. 2. Like I have said earlier, it helps keep your reader for a longer period of time.

and this is how the widget looks like:

recommended post widget

Before I forget, the code was given to me by a friend and it is working perfectly well because I am using it in my news blog.

HOW TO ADD A SLIDE OUT RECOMMENDED POST TO YOUR BLOGGER BLOG

Without wasting your time, let’s get right to the main show. Are you ready to tangle with me? Then let’s roll guys…

Login to your blogger dashboard >>> Click Template >>> Click Edit HTML >>> Check the “Expand Widget Templates”

Are you still wondering or you have successfully checked the little box? If you have, let’s proceed please.

Now locate the below.

<data:post.body/>

If you’re finding it difficult to search for the above code, simultaneously press the ctrl + F key and a search box will pop out below your browser. Now paste the above code in the search box and it will search for it.

Must Read: HOW I ADD MENU TO MY BLOGGER BLOGSPOT

Have you seen it? Now below the above code paste the codes you’re seeing below

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

Have you pasted it? If you have done that, click save template and close.

We have done the first step now let’s go to the step two (2) of the matter at hand.

Click Layout in your dashboard >>> Click Add A Widget. Have you clicked the Add A Widget?

Click HTML/JavaScript and past the below code

<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://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js”,function(){},”hl-out-slide”)},”jQueryjs”)} </script> <a href=” http://onenaijablog.com/2012/12/adding-a-slide-out-recommended-post-to-blogger-blog” target=”_blank”></a>

Have you pasted the code? Now click the save button and you’re done. Now go check your blog post and scroll down, have you seen your work? Smooth right!

Note: You can change the default url to your own url if you feel like. Now go get your readers staying longer than before.

Do you have something to say? The do use the comment box below to drop them. Remember that your comments and thoughts are highly appreciated and welcomed

How was the post? Was it helpful? If yes! Then do click the like button, share us and recommend us to friends. Do not forget to subscribe to our feed for your latest updates on the go.

<b:if cond=’data:blog.pageType == “item”‘>

<div style=’display:none’ id=’bpslidein_place_holder’></div>

</b:if>

Similar Posts

7 Comments

  1. I’d recommend using a plugin for this with related posts too. And for your blog, perhaps a better layout? You can put your code on a code tag or similar and divide the procedure in simple steps with headers. No hard feelings though 🙂

    1. Hello Servando,
      None Taken bro… but which plugin can one use on a blogger blog? or did you read the post or you just want to comment for commenting sake. this post is not about wordpress but blogger blog (blogspot blog). better still thanks for your comment.

      1. Yeah, I didn’t specify my recommendation was for WordPress or another CMS. Yours works for Blogger. Sorry for the confusion.

        About the rest, I remember there’s a Quote function on Blogger. You can put the code inside to give it a better look (right now it’s messed up and goes behind your sidebar). Or maybe it’s Google Chrome that’s not rendering the HTML as it should?

Leave a Reply

Your email address will not be published. Required fields are marked *