Social Sharing Widget for Blogger in WP Style

Today I'm sharing a New Social sharing Widget in WP Style. Many request comes from my blog readers for this type of widget. In this widget use four popular social network sharing codes (facebook , twitter , google+ and linkedin) and use slide-in and slide-out css code for social buttons. Lets check out this image preview andsee my blog post below.

How to add Social Sharing Widget For Blogger 

First,

1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed

Just follow 3 Simple steps,

THE JQUERY PLUGIN!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.

If not add the below snippet code before </head> tag

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

THE SOCIAL SCRIPTS

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)

Add the below snippet code before </head> tag

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'>/*<![CDATA[*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons {    border-radius: 5px;    padding: 14px 7px;    background: white;    width: 680px;    overflow: hidden;    margin: 2px auto 0;    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button {    background: #DCE0E0;    position: relative;    display: block;    float: left;    height: 40px;    margin: 0 7px;    overflow: hidden;    width: 150px;    border-radius: 3px;    -o-border-radius: 3px;    -ms-border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}.icon {    display: block;    float: left;    position: relative;    z-index: 3;    height: 100%;    vertical-align: top;    width: 38px;    -moz-border-radius-topleft: 3px;    -moz-border-radius-topright: 0px;    -moz-border-radius-bottomright: 0px;    -moz-border-radius-bottomleft: 3px;    -webkit-border-radius: 3px 0px 0px 3px;    border-radius: 3px 0px 0px 3px;    text-align: center;}.icon i {    color: #fff;    line-height: 42px;}.slide {    z-index: 2;    display: block;    margin: 0;    height: 100%;    left: 38px;    position: absolute;    width: 112px;    -moz-border-radius-topleft: 0px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 3px;    -moz-border-radius-bottomleft: 0px;    -webkit-border-radius: 0px 3px 3px 0px;    border-radius: 0px 3px 3px 0px;}.slide p {    font-family: Open Sans;    font-weight: 400;    border-left: 1px solid #fff;    border-left: 1px solid rgba(255,255,255,0.35);    color: #fff;    font-size: 16px;    left: 0;    margin: 0;    position: absolute;    text-align: center;    top: 10px;    width: 100%;}.button .slide {    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}.facebook iframe {    display: block;    position: absolute;    right: -16px;    top: 10px;    z-index: 1;}.twitter iframe {    width: 90px !important;    right: 5px;    top: 10px;    z-index: 1;    display: block;    position: absolute;}.google #___plusone_0 {    width: 70px !important;    top: 10px;    right: 15px;    position: absolute;    display: block;    z-index: 1;}.linkedin .IN-widget {    top: 10px;    right: 2px;    position: absolute;    display: block;    z-index: 1;}.facebook:hover .slide {    left: 150px;}.twitter:hover .slide {    top: -40px;}.google:hover .slide {    bottom: -40px;}.linkedin:hover .slide {    left: -150px;}.facebook .icon, .facebook .slide {    background: #305c99;}.twitter .icon, .twitter .slide {    background: #00cdff;}.google .icon, .google .slide {    background: #d24228;}.linkedin .icon, .linkedin .slide {    background: #007bb6;}  /*]]>*/</style></b:if>

ADDING SOCIAL BUTTONS WIDGET

Let’s add the final Social horizontal bar widget code.

Add this code before <data:post.body/> tag.

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

 <div id="sbuttons">  <div class="facebook button">    <i class="icon">      <i class="icon-facebook">    </i>  </i>  <div class="slide">    <p>      facebook    </p>  </div>  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true">  </iframe>  </div>  <div class="twitter button">    <i class="icon">      <i class="icon-twitter">    </i>  </i>  <div class="slide">    <p>      twitter    </p>  </div>  <a href="https://twitter.com/share" class="twitter-share-button" data-via="digitalhubinc">    Tweet  </a>  <script>    !function(d,s,id){      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';      if(!d.getElementById(id)){        js=d.createElement(s);        js.id=id; js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');  </script>  </div>  <div class="google button">    <i class="icon">      <i class="icon-google-plus">    </i>  </i>  <div class="slide">    <p>      google+    </p>  </div>  <!-- Place this tag where you want the +1 button to render. -->  <div class="g-plusone" data-size="medium">  </div>  <!-- Place this tag after the last +1 button tag. -->  <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>  </div>  <div class="linkedin button">    <i class="icon">      <i class="icon-linkedin">    </i>  </i>  <div class="slide">    <p>      linkedin    </p>  </div>  <script type="IN/Share" data-counter="right">  </script>  <script src="//platform.linkedin.com/in.js" type="text/javascript">    lang: en_US  </script>  </div></div></b:if>

SAVE TEMPLATE!!!

Save the template and check your blog post pages, a working and awesome jQuery based New Slide-in and Slide-out social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.

CHANGES :

1. I FOUND THE TAG THREE TIMES?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,

Solution:

Search for below two lines

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

<data:post.body/>

Place the Widget code in between the two tags.

2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

You can change the background color of Horizontal bar.

Solution:

In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.

3. Change your facebook APP ID : 568581339861351

>formatman<