Recommended Post Slide out for Blogger

Recommended Post Slide out for Blogger“Keep the visitors glued to your site for long” This is what every blogger out there wants to do. The Recommended Post slide Out Widget does just that. It’s kind of  an invitation to the reader to read a new post once he has read one of your blog entries. You might have seen this kind of a widget on many popular websites like New York Times, Mashable, Times of India etc.

I too loved the idea and found out that some one else had already made a jQuery snippet which does just the same. You can read about this awesome code on Mary Lou’s blog at http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/ 

I have made some modifications to the snippet so that it gets loaded asynchronously without affecting the page load. The Slide out will show random posts from your Blog. The random posts are fetched from your Blog Feed using Ajax. 

Demo of the Slide Out

Scroll down to the bottom of the post and you should see the Recommended Slide Out.

image

Add the Recommended Post Slide out Widget

To add the widget to your blog, you can use this one click installer.

Customizing the Recommended Slide out

1. End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder

e.g.: <div id='bpslidein_place_holder'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.

In your template Find,(You will have to expand the Widget Templates)

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

or

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

or

<data:post.body/>

Immediately below any of these, add the following snippet and save our template

<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.

2. Customizing the Look and Feel of the Slide out.

You can obviously style the Recommended Slide out. But before you do that, you have to add this variable definition to your template

<script>var bpslidein_custom_css=true;</script>

This should be added somewhere above the Slide Out Widget. If this variable is not set, a default StyleSheet will be used to spice up the Recommended Slide out.

Once this variable is set to true, you can add your own CSS definitions. You can add your CSS at Template Designer > Advanced > Add CSS

This is the default set of Style definitions applied to the Widget. You can modify them and use it.

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;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:#555;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;}

3. Other Stuff that you can edit

You can edit the Title of the Widget and the Loading text by editing the Widget Content.

Future Plans

This is the initial version of this widget, and better version will be made available based on the feedback that I get :).. If you loved the Slide Out, do share it with your Blogger friends.Your suggestions would definitely help me in improving the widget. :)

116 comments :

  1. I started using the slide the other day it is good although it doesn't always come up with pictures. I would recommend it because it looks professional and big sites like Mashable use it. If you make better versions I will definitely get a customised version.

    ReplyDelete
  2. i already use it on my other site, but thanks

    ReplyDelete
  3. Basically, you are giving us a kind of pop-up. I find these annoying when I encounter them, something I need to stop and get rid of. These irritating elements are reasons to leave a site, not become "glued" to it. Any blog I follow that uses this will become un-followed. I think I'll pass. Thanks for nothing.

    ReplyDelete
  4. @Dave - An option to dismiss the Widget completely will be there in the next update.

    ReplyDelete
  5. I like it.But it is interferring with my right side bar by being transparent.How do I change that.
    http://ideasoutofthemist.blogspot.com/

    ReplyDelete
  6. I've started using your one as it shows the pictures of my posts and actually recommends different pages unlike the slide!

    ReplyDelete
  7. And it is not working the way it is on your page-shifting to the right hand on scrolling up......:(

    ReplyDelete
  8. @Mihika - you added the place holder at the wrong location. The widget will go to the right when you are above the place holder.In your case it can never happen as the placeholder is at the top of your sidebar.
    The best place to add the placeholder is below <data:post.body/> using the conditional tag that i have specified in the post.
    I'm looking into the transparency thing.

    ReplyDelete
  9. @Mihika - fixed the transparency issue. If you still have troubles reload the page :-)

    ReplyDelete
  10. Yes,the transparency issue is no longer their.And I had two .So now I have pasted it below the 2nd one.I have also deleted the code in step 2.
    But now the widget appears at the very bottom of the page and is hardly noticeable.Can I make it appear a lil bit upwards.Sorry for causing all the trouble......:)

    ReplyDelete
  11. @Mihika - the placeholder is not there in your page. So you might have to paste it below the first one.

    My Script will insert a default placeholder at the end of the page if it doesn't find one.That's why it is showing up at the bottom of the page.

    ReplyDelete
  12. Great widget! Is there a way to "recommend" the most recent posts I made?

    ReplyDelete
  13. Great thanks for sharing master..

    I Like it..

    ReplyDelete
  14. This widget is awesome ,it beats the "The Slide" one,Had a suggestion ,can it contain a button to load more posts if the reader doesn't like the one being displayed

    ReplyDelete
  15. This is truly awesome. This widget is similar to the slider on WordPress blogs and is a perfect replacement for Simplereach slider. Cheers, great job !

    ReplyDelete
  16. is this available in blogger dynamic views?

    ReplyDelete
  17. Great widget.
    Couple of things. May have been mentioned already:

    1) Can you change it so it is not pulling all posts, but maybe posts from the past week or month. Basically set something up so it doesn't pull posts that are too old.
    2) When it pulls an image from a video it seems to "mash together" (that's my technical term) the text and the image, but I think when it is a still picture it works great.

    It's a fantastic tool thank you for sharing!

    ReplyDelete
  18. @picturequiz bank - sorry dynamic views don't support widgets as of now.
    @Prayag - thanks for the suggestion :-)

    ReplyDelete
  19. Hello, nice trick. I am a blogger from Indonesia. greetings of friendship

    ReplyDelete
  20. Had another suggestion , can you add Tweet ,Like and also +1 buttons , something similar to the Simplereach one

    ReplyDelete
  21. I used your widget on my blog and it is working just perfect
    http://full-movies-free-download.blogspot.com

    ReplyDelete
  22. Brother thanks a lot for this work.. nd please tell me can i fix recent post ? is it possible? a

    ReplyDelete
  23. A good widget but I have a couple of issues. Firstly and not really too important, it doesn't have any thumbnail as yours does. Secondly and this is annoying, on my blog as I scroll to the end of the post it slides out but then fails to slide in again as yours does. I'm finding this very irritating and would guess my blog readers are too. Any advice on how to change it?
    www.dpfinnie.com

    ReplyDelete
  24. Hey its not working on my blog.... actually i edited title and loading text of that codes but after saving its not working. I removed all things and installed again but still same.. pls help admin.. reply fast pls.

    ReplyDelete
  25. @Dino - if you upload images onto your blog(not external ones), then the thumbnail should appear. When a user scrolls down to the div with id bpslidein_place_holder, the slide will come out. If you don't set this div anywhere on your page, then a dummy div will be added to the end of the page to mark this.

    The instructions to add this dummy div are there in the post.

    ReplyDelete
  26. Awesome slide widget.....

    Thanks for the share....:

    ReplyDelete
  27. It would be great if the minimized slide is smaller or could be reduced to just a small tab.
    Anyway the idea is useful but personally I think it has some annoying pop-ups thing to it.

    ReplyDelete
  28. Reaaly Nice Widget.Thanks For Share.

    ReplyDelete
  29. Thanks, it worked on my blog. But I am not getting images in there. Check it: www.chankeypathak.com is the URL. I want to add images.

    ReplyDelete
  30. nice tips .... i like it

    Thanks

    ReplyDelete
  31. hello how to add css code and customize it can you explain it clearly

    ReplyDelete
  32. It is best blogger plugin, I really get best tips from it and add to my blog site. I really thanks for blogger plugines articles writers to share this great tips. Lot of articles in this site is very interest. Keep in touch. :D
    I'm wwww.blackpointforum.com

    ReplyDelete
  33. @SOFTECHNOGEEK -First you have to tell the script that you are gonna use Custom CSS.To do that you should add <script>var bpslidein_custom_css=true;</script> some where above the widget.(For example you can add it just above </head> in your template)

    Once that is done you can add custom CSS at Blogger Template Designer > Advanced > Add CSS

    ReplyDelete
  34. Slider work, but not work when i select a particular point for open it

    ReplyDelete
  35. This widget does not work on my website. : ((
    http://hirek.elelmiszerklub.hu/

    ReplyDelete
  36. I have add it to my blog. It is great for place ads. I really like this recommend pop up, I want more tips how to add recommend box offer with like/google + button, it will help to get more like and G+s. I have add this to my blog at http://www.tipsblaster.com/

    ReplyDelete
  37. Dear Admin, This widget works on my blog, but when i paste something like this b:if cond='data:blog.pageType == "item"
    div style='display:none' id='bpslidein_place_holder'
    in my edit html editor below post-footer, then it open on starting and does not close means not open in particular point which i selected, please help me out, Reply me ASAP.

    ReplyDelete
  38. Hello and Happy New Year! This is a fantastic widget; there is only one issue that I hope you can help solve: I am unable to use Custom CSS as instructed. When I paste the script before the ending head tag of my template it ceases to "slide" and embeds itself into the right sidebar. Any advice?

    ReplyDelete
  39. Doesn't work for me at all. I used the "One-click" installation for Blogger.

    ReplyDelete
  40. Started to work... somehow...
    Actually it works during reading of a single post. How make it appear on the main page where several posts are displayed? (On Blogger)

    Thanks.

    ReplyDelete
  41. great widget but can't get it to work on my blog http://www.tsinoyfoodies.com/

    ReplyDelete
  42. hey friend i can't understand how display this widget on specified location

    ReplyDelete
  43. @Ravi Jindal:same problem for me it open in the top of the post and not hide......
    Blog:infotechsam.blogspot.com

    ReplyDelete
  44. Sometimes the text overlaps the thumbnail. How can I move the text to the right?

    Thanks.

    ReplyDelete
  45. how to increase the visitors to my blog....?

    ReplyDelete
  46. Hello bloggerplugins, i added the blogger widget to my blog http://what-latest.blogspot.com
    It's working, Thank you so much for that !!!
    But the PROBLEM is >> it's appear when scrolls down reach at the end of my webpage . but i want it to appear just like your blog. I will be happy if you visit my blog and suggest me what modify is needed in the blogger widget. And 1 don't want to implement the code. I want to modify the widget only which you mention firstly.Please help me, Hearty Thanks to You !!!

    ReplyDelete
  47. @what-latest - read the part about "End Of Post marker" on this post.

    ReplyDelete
  48. the slide my simple reach is better option

    ReplyDelete
  49. Tell me please what i should write instead of "place" if i want the slide to appear just like your blog.

    ReplyDelete
  50. It's working. Great!!! Thank you very much!

    ReplyDelete
  51. Great tutorial, I will use this option on my blog for shure!

    ReplyDelete
  52. The occurrence of the slider is not working good for me, I added the code you mentioned but then too slider pops-up at the end of the post. Any fix?

    ReplyDelete
  53. Hello :)
    I have add this widget to my blog. It is great:)

    ReplyDelete
  54. Too annoying. I've immediately blocked this script. If anything, it should have two missing features.

    Clicking the "X" should dismiss it completely; that is the standard for the use of that symbol as a window control and you have misused as a collapse buttom.

    The function should be re-rigged to be and expandable element inside the post itself. Otherwise, it isn't really a recommendation based on the actual content that brought a reader to a specific post.

    ReplyDelete
  55. not work in myblog www.elhijrah.blogspot.com help me...

    ReplyDelete
  56. I can't get it to come up on my blog. I used the one click installer.

    ReplyDelete
  57. nice widget, my brother! it looks like the one I seen as plugins in wordpress. What I wanna ask is what is the function of "?" mark as it always refers to http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html?utm_source=blog&utm_medium=gadget&utm_campaign=bp_slideout everytime i click it? From what I've seen before, it usually refers to the setting from which users can choose whether they want to see the recommendation widget or not.

    ReplyDelete
  58. it worked but i saw in ur blog it automatic hide when we go in top and automatic show in below ....
    . How do to automatic hide when we go in top.??????
    reply me as fast as possible

    ReplyDelete
  59. I would love to use this slider, but it doesn't seem to want to work on my blog. I added it by way of the "Add to Blogger" button you have up top, but that puts it directly into my sidebar. Is that where it's supposed to be?

    ReplyDelete
  60. nice...
    i used this thanks...
    http://www.geekstrack.com

    ReplyDelete
  61. Hi,

    One help please, I dont know how it has happened but a '0' appears in the middle top of the layout page and in the left hand side top corner of my blog, can you please resolve it.. my blog address is sosnab.in, you can view the zero in the top left corner.. Help me out pls...

    ReplyDelete
  62. thank you.,
    good tutorial ..
    I will try later.

    ReplyDelete
  63. Great...! I did it. Thank you very much.

    ReplyDelete
  64. Works like a charm. I simply installed the widget and added the bpslidein_place_holder to where i wanted it to slide out.

    My question - is there a way to categorize what you want to "recommend". I have a tv blog www.dannybarttv.blogspot (new to this) and i wanted to be able to recommend perhaps some prior eps related to the show post. Let me know. Regardless, it is still a great tool. Thanks!!

    ReplyDelete
  65. i already did all the instructions, but it only appears on the bottom page :(

    ReplyDelete
  66. I have try it but not working in my blog..
    please help me..

    ReplyDelete
  67. this widget gets slide out like your site but not slide in as we scroll up again ... i added the div code also ...

    ReplyDelete
  68. wow.......Really gr8 work buddy.....i have applied this in my website.....check it out....http://www.jobsforame.com

    ReplyDelete
  69. I prefer Related Posts widget more, this just feels like a popup ad

    ReplyDelete
  70. I like recommended posts better, this just seems like a popup

    ReplyDelete
  71. hey
    nice post.
    how can we install this same widget on a wordpress blog?
    thanks.

    ReplyDelete
  72. Tnanks..
    i'ts working in my blog :)

    ReplyDelete
  73. thanx buddy nice widget i have ever came through for blogger there were plenty of them for wordpress users but nice modifications great method to attract people to read your posts

    ReplyDelete
  74. I used the one click installer but it is not being displayed at my blog :( www.nuqoosh.blogspot.com

    ReplyDelete
  75. Hey thanks for this gadgets here look some of my gadgets are came from you www.pspskull.blogspot.com Thank you :) again

    ReplyDelete
  76. Does it works in dynamic template?

    ReplyDelete
  77. NICE!

    but the slide only displayed at very bottom on my blog :/ trying "End Post Of Marker" not workin ..

    ReplyDelete
  78. very nice. slide works perfect

    ReplyDelete
  79. its not working on firefox.......plz help

    ReplyDelete
  80. Is there any way that the slider should appear at the middle or any convenient place other than the bottom?
    I already have a plugin that sticks to the bottom!

    ReplyDelete
  81. Dear admin, it comes out at the end of the page. I did all the things but not able to do it. On your site it slides out when we scroll down the page. I want it in the same way on my site.

    www.getalltricks.in

    Plzzzzz help and reply immediately.
    thanx

    ReplyDelete
  82. It is working on my site. But it comes out at the end of page. I want it to come out at the middle of page when a reader scrolls down the page as it is on your site. Plz help.

    http://www.getalltricks.in/

    ReplyDelete
  83. How do I remove this widget? It does work fine, but is not what I want at the moment. I have tried to search my html for the snippets on this page, but can not find them. I remember using the one click install...

    ReplyDelete
    Replies
    1. just go to the "Layout" Page and remove the Gadget with name "Recommended Slide"

      Delete
  84. Jeppe, just click layout and delete the widget if you haven't found it yet.

    Aneesh, I tried to install it but it has an issue with my 3 tabbed widget because 3 tabbed widget stopped working and the ad slide still didn't show. In IE it did which is weird.

    ReplyDelete
  85. Hi, I have a little problem, when its pop-ut it wont back to the right side :(

    ReplyDelete
  86. Hi,

    is it possible to replace the related post racommendation with a customized content?

    Thanx :)

    ReplyDelete
  87. Very easy steps top follow. I have installed it. Good post.
    Thanks for sharing.

    ReplyDelete
  88. Dynamic views support widgets now! it will be nice if you can add it now,:-)
    any others plugins supported for dynamic views?

    ReplyDelete
  89. hi.. it worked for me....thanks but what shall i do for slide to be in the middle or at the top... Visitors are not able to as it is in the bottom ..please kindly help me.mail me @ jbothejeansblog@gmail.com

    ReplyDelete
  90. Hi this works fine on all browsers but behaves very oddly on Firefox 20.0.1. See http://www.funny-joke-pictures.com/2013/04/funny-missing-poster-joke-picture.html (scroll to bottom)

    The slide window appears but then judders.

    Robert

    ReplyDelete
  91. Hi,
    This works very good but one problem is that the slide out appears until the page is scrolled to the bottom whereas the current post is finished before that. what change i need to perform so that the slide out comes before the user reaches to the bottom of the page. Ideally i want it when the visitor reaches till mid of the page.
    Thanks
    Junaid
    www.DailyTenMinutes.com

    ReplyDelete
  92. Thanks alot, great post.

    I have it running cute on my blog. http://www.thatnaijablog.com

    ReplyDelete
  93. After pasting the empty hidden div code to let the slider popout after the post content doesn't work correctly.

    The slide popup continuously shakes in such cases.

    Any solution for the same?

    ReplyDelete
  94. This is annoying and intrusive. Shame on you.

    ReplyDelete
  95. Hi! Thanks for this post? How can I edit the color of the blue line on top and the post/link title color?

    ReplyDelete
    Replies
    1. Modify Code and You are done ...,

      #bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;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:#555;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;}


      Thank You --- Best of Luck -----

      Write me at :: http://wikets.blogspot.in/

      Delete
  96. How can I make "?" open in a new window?

    ReplyDelete
  97. I have it on my site and working but the posts its recommending arent really relevant to the post they're sliding onto. How is it pulling the recommended posts? Is there a way to make it pull them better?

    ReplyDelete
  98. This doesnt seem to be working anymore.

    Any idea why it would stop?

    ReplyDelete