SkyUrdu | The Largest Hub Of Tutorials
Select Menu
  • Home
  • Google Adsence
    • Google Adsence Tricks
    • Supports Languages
    • 11 Tips For Adsence
    • 12 Tips For Adsence
    • 100% Approval Tip
    • Achievement Card
    • Adsense Revenue
    • Verify Account
  • Make Money
    • Earn With Bidvertiser
    • Earn With Freelance
    • Earn With Blogging
    • Earn With You Tube
    • Earn With Ads Cash
    • Earn With Adsence
    • Earn With Infolinks
    • Earn With Typing
  • Blogging
    • 404 ERROR Page
    • Google+ Fallow
    • BackUP/Restore
    • Mobile Templet
    • Custom Domain
    • Blogger Tricks
    • Custom Fonts
    • Templetes
  • SEO
    • Google Algorithm
    • Google Analytics
    • Select Keywords
    • Blogger Vistors
    • Alexa Ranks
    • Robots.txt
    • SEO Tricks
    • SEO Tools
  • Social Media
    • Whatsapp
    • Facebook
    • Pinterest
    • Google+
    • Twitter
    • Skype
    • Imo
    • VK
  • Networks
    • Easypaisa
    • Mobicash
    • Mobilink
    • Telenor
    • Warid
    • Ufone
    • Zong
  • Much More
    • How To
    • Much More
Home » Blogger Tricks » Much More » Post Slide out for Blogger

Post Slide out for Blogger

Unknown
Add Comment
Blogger Tricks, Much More
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. :)
Share This!--- Facebook Twitter Google+

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Search Hare

Populer Posts

  • Adsense share Content and Search Revenue
    AdSense is most amazing platform for generating income. Every Blogger try to earn money from their Blog. For this reason they must ...
  • Ufone SIM Lagao Offer
    Ufone brings new Ufone SIM Lagao Offer for all of its customers nationwide. Ufone brings Re-inserting SIM offer to its prepaid customer...
  • Money Transfer By MobiCash
       Now it just takes a few moments for you to transfer money to your family, friends or business partners using services of Mobicash. Any...
  • How to verify your Google Adsense Account
    Want to earn money online ? Google Adsense is the best advertising network to generate revenue for webmaster and bloggers. It is no...
  • How To Increse Reddit Link Karma
    Reddit is awesome place to generate huge traffic, but to get good traffic from reddit first you should have good reddit link karma. The...
  • How To Fully Approve Google AdSense Account Complate Guidance
    Google AdSense is the best ads network company to monetize a blog or a website. Many other Ads networks are available in the Internet ...
  • AdSense achievement card
    The most popular and leading legit advertising platform is Google AdSense where billions of people earning money by monetizing their...
  • Facebook send button for Blogger
    It had been some time since Facebook released their new Send Button. The Send button is a social plugin that websites can use to let p...
  • Edit Blogger Mobile Templates
    There is some Good news from the Blogger Team on the Blogger Code Blog . If you have enabled the Mobile Templates, you will be able...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author