Monday, January 16, 2012

How to add slider to your blogger? With perfect Color combination.

Friends you can see a Social Networking slider on the left side of this blog which brings all the social networking traffic on this blog. This article is about "How you can add this slider in your Blogspot or Bloggers blog with perfect color combination matching your Blog?" 
Underestimating the power of share buttons is like neglecting a major source of traffic to your blog. I’ve already written several posts on integrating your blogger hosted site with facebook, google plus and the rest of them.
These posts include adding like buttons to individual blog posts, adding google plus buttons to blog posts, facebook comment box for blogger and large share buttons under blog posts among others.
Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting. Unlike the previous ones, it’s easy to get this done as you won’t need to do any sort of HTML editing on your template. The floating sidebar sharing widget comes with the most popular social sites. You can see the widget just at the right side of this page and it scrolls with the page, leaving your visitor no choice but to share your content.

How To Add Floating Share Buttons On The Sidebar
1. Log in to your blogger account and click on Design
2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save. There’s no need for a title.
<!--SideBar Floating Share Buttons Code Start-->
<style>


#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px


0;z-index:10;}


#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}


.fb_share_count_top {width:48px !important;}


.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}


.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}


.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}


</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.learntoearnmoney.net/2012/01/how-to-add-slider-to-your-blogger.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>


<!--SideBar Floating Share Buttons Code End-->
5. Save the widget and preview your blog.
If you already have a google plus button above or below your posts, the one in the widget might not appear. It seems you can’t have two +1 buttons on a page.
If you’re using a dark template, you can try out the code below if you don’t quite like the first one:
<!--SideBar Floating Share Buttons Code Start-->
<style>


#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px


0;z-index:10;}


#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}


.fb_share_count_top {width:48px !important;}


.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}


.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}


.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}


</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.learntoearnmoney.net/2012/01/how-to-add-slider-to-your-blogger.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>


<!--SideBar Floating Share Buttons Code End-->
How to change the background color of Slider Background?
You can also change the background color of the slider to any color you want:
Just find "background-color:#eff3fa" in any of two provided above and replace the color code #eff3fa with your desired color code. 
You can use #ffffff for white background
or #000000 for black background 
or #ed1c24 for red background 
or #00aeef for sky blue background
or #00cb00 for green background.
Or choose any color code of your own.

I hope this post will help you to add you favorite slider on your bloggers blog with perfect color combination.
Please leave a reply if this post helped you. And you you like this post then please share it with your friends on Facebook or Twitter.
How to become a Successful blogger?CLICK HERE

No comments:

Post a Comment

 

Recent Comments

Follow the blog

Join 500+ Members on Facebook