New version of recommended for you post slide out widget with social share buttons

Recommended post slide out widget always helps your blog visitors to keep surfing different posts on your blog without leaving your blog, new version of recommended slide out post widget with social share buttons and more customization option, in this widget i have included facebook like button, twitter share button and google+ button, and also give option to change position of the widget,in old version widget it was fixed at right side of your page corner, but in this widget you can freely set position of the widget as you want to show left or right ! and also give option to change color of top border as matching with your blog/site and  more..

Demo

How To Install this Gadget?

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)

<data:post.body/>

Immediately below it, add the following snippet and save your template

<b:if cond='data:blog.pageType == "item"'> 

Now when the reader scrolls down to this div, the slide will open up.

To Add Gadget to Your Blog...

1. Go To LAYOUT.
2. Click on Add Gadget below Blog Post.
3. Select Third party html Gadget.
4. Copy The Below code in it.
5. Now Click Save & You are Done!

<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #F9780E;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #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:#F9780E;
}
#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;
}

?

+

X

Recommended for you