Recommended Posts Slide out Widget Generator

Here i am with an another blogger widget generator "recommended posts slide out widget" which works based on jQuery and it will be show up on the posts pages only with the jQuery slide effect. default setting of the position of the this widget will be right side of the page but using our generator you will be able to set the position right or left according to your need. along with that option you have also some additional options such as show/hide social share buttons in slide box, Customize background color or border color or title links color of the slide widget etc.

Also read : jQuery Pop-up Facebook Like box Widget Generator V1

After adding recommended posts slide out widget to your blog, it will helps to increase the page views of your blog. Whenever, a visitor comes to your blog's post and scroll down to read more then recommended posts box will be slide out to the left or right side as you set it. and it will recommended to read other related article to your readers.

Recommended Posts Slide out Widget

How to Add This Widget to Blogger ?
STEP : 1 Adding marker
First of all go to blogger > Template > HTML Editor and search for <data:post.body/> tag in your blog's HTML and copy and paste the below code just after the above tag you searched.

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

STEP : 2 : Generate the widget code
  1. Go to this Recommended Posts Slide out Widget Generator page.
  2. Customize settings and fill the all required data.
  3. Click on "Generate" button to get the code of the widget. Simply, Click on "Copy to Clipboard" button then code will be copied automatically.
  4. Now, go to your blogger dashboard > Layout > Add a gadget > Choose HTML/Javascript from the list. and paste the copied code into it. 
  5. Finally, save your widget and you have done !
Thanks :)

Last Update : 28-1-2015

15 comments:

  1. Got a useful widget! I am going to add this to my blog.
    http://www.wwtricks.blogspot.com

    ReplyDelete
  2. Great post, thanks a lot for sharing this widget. Keep up posting.
    Tiny Serval

    ReplyDelete
  3. this is nice. But your blog is copy protected....
    I've done it with inspect element...
    But everyone won't try it....
    So remove the copy protection....
    Codes can't be seleced ~~!
    Nanogalaxy

    ReplyDelete
  4. Hello. I need this to appear faster, not when i scroll down to the bottom of the page. How can i make it appear when i'm in the middle of the page?

    ReplyDelete
    Replies
    1. Paste this code above <data:post.body/> : <b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div> or anywhere in your template, you want to be displayed.

      Delete
    2. @Nitin Maheta The code doesn't work for me. It keeps saying that it needs a closing tag of . When I wrote the closing tag it keeps asking me to change others. Please help me with this!

      Delete
  5. i have another widget on my blog have this sentence but it stopped when i add this new widget so it works only when i remove this hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function()
    so what sould i do to make both of them works ! i already have this sentence on my blog template ! that's why it doesn't works when i add a new widget have the same code !so what's the solution to make it works ! i mean what's the solution for the duplicate hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function() !!

    ReplyDelete
  6. Your code has a big mistake which can surely make it not to work ! Everyone used this code should have edited it to use it ! Here is the mistake you've just made :
    <b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div>
    There is a mistake that you didn't close the tag !


    The code might be like this to work :

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



    If you edit it, It will be so helpful for more people !

    ReplyDelete
    Replies
    1. Thanks for informing. :)

      Now it is fixed.

      Delete
  7. Thank you. :)
    It work wonderfully on my blog.

    ReplyDelete
  8. thank you, it work wonderfully on my blog, thanks brother

    ReplyDelete
  9. Thanks for the wonderful commended post slider it just pasted on my blog and its look nice Blogging Tips and Tricks

    ReplyDelete
  10. Nice post :) http://love2blogging.blogspot.com/ check my blog for blogging tips

    ReplyDelete
  11. Nice guide altho this doesnt work on my blog www.theticblog.com
    I have 3 codes of the code you mentioned. And whenever I put your widget, half my page stops showing.

    ReplyDelete