How to Customize Your Blog with this Floating share bar

how to design blogger

So after writing your nice post which you know would attract a lot of readers,You would also love them to share your post to social medias like Facebook,Twitter,Google+ and over 300 others, for other people to read,Therefore Increasing your Blog traffic and creating Potential readers.
In this post,I’ll teach you the easiest way to achieve that by using Floating Sharing Bar on your blog,I call it a Floating bar because it is not Static and Floats up and down making your readers to see it.

To see how it really looks on a blog, Click Here

-- continue reading after ad below --
Loading...
floating share bar
a screenshot of mine

HOW TO ADD THE FLOATING BAR TO YOUR BLOG

1. Login to your Blogger Dashboard
2. Click on Layout
3. Click on “Add a Gadget” in the Layout
4. A pop up window will appear as Normal, Click on “Add HTML/Javascript” option
5. Copy and Paste the HTML code below in the box…You can give it a title of Your choice
6. Then save the Arrangement

put in gadget anywhere in Layout

<!– floating page sharers Start Share This With Friends–>
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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=’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=’gb’>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<div class=”fb-share-button” data-type=”box_count”></div></div>
<div class=’sbutton’ id=’gplusone’>
<g:plusone size=”tall”></g:plusone>
</div>
<div class=’sbutton’ id=’at’>
<a class=”addthis_counter”></a>
<script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js”></script>
</div>
<div style=”clear: both;font-size: 9px;text-align:center;”> <a href=”www.oscarleeblog.com/2015/12/how-to-customize-your-blogger-template.html” rel=”nofollow”>Get this</a></div>
</div>
<!– floating page sharers End –>

Try it and Let me know if it worked for you through the comment box…
Need more Blogging tips, check them out Here

Happy Blogging!

Loading...

Comments

  1. i will give it a try..

  2. I'll give it a try

  3. Thank you so much Admin for posting!

Speak Your Mind

*

%d bloggers like this: