Fixed Scrolling Social Buttons Box Widget For Blogger

We have provided many other blogger widgets which were very cool and beautiful. This is another among them. But the difference is that it scrolls with the users screen.This are also known as floating social media buttons for blogger.So adding this widget will make it easier to your users to follow your blog if they loved your content.The scrolling box is decent looking, but the icons of social media have a cool hover effect. You can check the live demo of it in the demo page.This buttons are just the beginning of the scrolling social buttons series. In future, many more impressive buttons will be launched with improved interface and looks.But for now you can just check out this buttons.

Demo:

On the demo page you will see a post with demo of All In One Subscription Box. On the right side there will be the above mentioned scrolling box of social media buttons. Click here to visit the demo page.

Steps To Add Scrolling Social Buttons Box:

• Log in to your Blogger Account.
• Go to Layout.
• Click on Add a Gadget >> HTML/ Javascipt.
• Paste the below code there.

<div class="border-rotate">
<a class="facebook" href="http://www.facebook.com/pages/Smart-Blogging-Methods/281181345301734?bookmark_t=page"></a>
<a class="twitter" href="https://twitter.com/AdityaThakker13"></a>
<a class="googlep" href="https://plus.google.com/u/0/108593142711028240140"></a>
</div>
<style>
.border-rotate {list-style-type:none;position:fixed;right:-1px;top:35%;border:1px solid #c4c4c4;background:#f2f2f2;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.facebook {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px 0px;display:block;zoom:1.2;margin:5px;}
.facebook:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -150px;}
.twitter {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -50px;zoom:1.2;display:block;margin:5px;}
.twitter:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -200px;}
.googlep {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -100px;zoom:1.2;display:block;margin:5px;}
.googlep:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -250px;}
</style>

• Now, click on Save.

Customization For Widget:

• Change the Orange Links with your social pages links.
• If you want to display this scrolling social buttons box on the left side then just replace the "right:-1px;( In Red Colour )" with "left:-1px;".

So now, you have completed the customization of widget and can publish it for increasing your followers and fans. This scrolling box will now be displayed on your blog and will scroll with your users screen.