Attractive Sidebar Scrolling Social Sharing Widget For Blog

Hello Everyone! I'm back again and today i am sharing Sidebar Scrolling Social Sharing Widget For Blog.Social Networks nowadays a biggest source for driving traffic traffic towards your blog.This attractive sidebar social sharing widget help to share your post on many social network and bring a lot of traffic and publicize your blog.
You Can See Demo 

How To Add Sidebar Scrolling Social Sharing Widget

Follow These Step To Add This Widget.

   1-Login In To Your Blogger Account

   2-Then Select Template

   3-Back-up Your Blogger Template

   4-Now Click On Edit HTML

   5-Now Find Below Code

<b:includable id='post' var='post'>

Now Copy And Paste Below Given Code Below The Code Founded Above.

---

<!-- f4uonlinecourses.com Scrolling Social Bar -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style>

.f4u_social_floating{

    position:fixed; bottom:18%; margin-left:-82px; float:left;

    width:65px;

    background-color:#f7f7f7;

    padding: 5px 0 0px 0px;

     border-top:1px solid #ddd;

border-left:1px solid #ddd;

border-bottom:1px solid #ddd;

z-index:9999px !important;

border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;

}

.f4u_social_floating .f4u_side_social_button{

    margin-bottom:5px;

    float:none;

    height:auto;

    width:60px;

}

.f4u_social_floating .f4u_fblike_vcount{

    margin-left:5px;

}

.f4u_social_floating .f4u_twitter_vcount{

    margin-left:2px;

}

.f4u_social_floating .f4u_gplus_vcount{

    margin-left:5px;

}

.f4u_social_floating .f4uButton_gradient{

    background:none !important;

    height:21px !important;

    padding-left:0 !important;

}

.f4u_social_floating .chicklets, .f4u_social_floating .f4uMainServices {

    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaXL20gACnibnWS5iaz7JKvpNmyK6MdMUxLmWSdIeRMk469C78Jju7gu7tZHQJAoP2i2AKhnCKwQwoxmgM0dcWhIMgaDpsqycfeNPGKz1nPJolGslsiZGX-sW1OYgf1ZNd5zaRaj-mYUs0/s400/gc_social_sprite.gif&#39;) no-repeat !important;

    height:19px !important;

    width:45px !important;

    padding:0 !important;

}

.f4u_social_floating .f4u_twitter_vcount .f4u-twitter-counter{

    background-position:0 -58px !important;

}

.f4u_social_floating  .f4uButton_gradient{

    border:none !important;

}

.f4u_social_floating .f4uBubble_count{

    width:44px !important;

    font-size: 15px !important;

    font-weight: normal !important;

    padding-top:7px !important;

    height:23px !important;

    background:none !important;

}

.f4u_social_floating .f4u_twitter_vcount .f4uBubble_count{

    color:#00a6df;

    background-color:#f8fbfc !important;

}

.f4u_fblike_vcount{

    margin-bottom: 0px;

    display: block;

}

.f4u_gplus_vcount{

    margin-bottom: 0px;

    display: block;

}

.f4u_twitter_vcount{

    margin-bottom: 3px;

    margin-top: 3px;

    display: block;

}

.f4u_social_floating .f4uBubble{

    background-position: 21px 31px !important;

    height:35px !important;

}

</style>

<div class='f4u_social_floating'>

    <script type='text/javascript'>f4uLight.options({onhover:false});</script>

<center>

<b>Plz<br/> Share!</b></center>

  <br/>

<span class="f4u_fblike_vcount">

<!-- Facebook Like button start -->

  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/><a href='http://goo.gl/9kErvN' rel='dofollow'></a>

<!-- Facebook Like button End -->

  </span>

  <span class="f4u_gplus_vcount">

<script type="text/javascript">

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<g:plusone expr:href="data:post.url" size="tall"></g:plusone>

</span>

  <span class="f4u_twitter_vcount">

<!-- Twitter tweet button start -->

<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='f4u' data-related='' href='http://twitter.com/share'>Tweet</a><a href='http://goo.gl/9kErvN' rel='dofollow'></a>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

<!-- Twitter tweet button End -->

  </span>

  <br/>

</div>

</b:if></b:if>

<!-- f4uonlinecourses.com Scrolling Social Bar End -->

---

Now Save Your Template.
Done :)

See More Widgets: Widgets For Blog

FeedBack:
If you find our today article 'Attractive Sidebar Scrolling Social Sharing Widget For Blog' helpful then share your response through below comment box.