Date: - Time:

For Questions and Quick contact
Call us - FB: Oscar Lee

1.19.2016

How to Customize Your Blog with this Floating share bar

 how-to-make-$25-on-payoneer
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
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!

3 comments:

We love to hear from you!

RECENT COMMENTS

Featured post

JAMB 2017 Results are online now - check yours here

JAMB - the Joint Admission matriculation board , has started the release of the 2017 UTME RESULTS online for the examinations that start...