Horizontal Social Sharing Buttons for Blogger

Hey! friends, How are you all I hope you all are fine. So Previously I had shared How you can change the text format from your blogs and today I’m going to share our first and unique widget. I named that widget as Horizontal Social Sharing Buttons for Blogger it will add to your end of the post and this widget is increase your likes, sharing, gplus, save your post to Delicious and email your post easily by one click. So Friends I think I described you all the things so lets start the post from below to add this widget to your blog 

Features Of this Widget

• Eye catching widget with hover effect
• This widget will add in your end of  the post
• This widget will increase your shares
• Its easy to add this widget in your blogger blog
• No Credit link on it
• Hover effect widget
• Load very faster on any browser like Internet explorer, Firefox and Google Chrome etc.

Credits Of this Widget

Readers! this widget is totally created from us and this widget have no Credit link so you’re free to share this widget on your blog but one thing we want from you that please give a linkback to us.

Tutorial on How you can add this Widget

So the much awaited step is arrived In this step I will teach you how you can add this attractive and Gorgeous widget in your blogger blog .

Step 1

• Go To Blogger
• Template > Edit HTML
• Ctrl + F
• Now find ]]></b:skin>
• add this coding above it

.horizontal-social-buttons{
padding: 5px 5px 25px;
background: aliceblue;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
opacity: 0.4;
margin:0px -5px;
}
.horizontal-social-buttons:hover {
opacity:1;
}
.horizontal-social-buttons h2 {
font-size: 20px;
background: #B0C5D8 url(‘http://www.paddsolutions.com/wp-content/themes/paddsolutions/images/bg-post-box-sb-title.gif’) left top no-repeat;
display: block;
font-family: magra, arial;
margin: 0;
margin: -4px -5px 10px -5px;
height: 46px;
line-height: 46px;
text-align: center;}
.email-post{
padding: 1px;
background: url(http://mashable.com/wp-content/themes/v7/img/icons/email.png) no-repeat left;
background-position: 5px 3px;
padding-left: 25px;
margin-left: 15px;
border: 1px solid #3274D0;
padding-right: 5px;
border-radius: 5px;}
a.email-post {color:#000;text-decoration: none;}
a.email-post:hover{color:#26b;text-decoration: none;}
.horizontal-social-buttons h2 {
font-size: 20px;
background: #B0C5D8 url(‘http://www.paddsolutions.com/wp-content/themes/paddsolutions/images/bg-post-box-sb-title.gif’) left top no-repeat;
display: block;
font-family: magra, arial;
margin: 0;
margin: -4px -5px 10px -5px;
height: 46px;
line-height: 46px;
text-align: center;}

Step 2

• Now find <div class=’post-footer-line post-footer-line-1′/>
• add this code to below this

<!– Scripts Start –>
<b:if cond=’data:post.isFirstPost’>
<!– Facebook –>
<div id=’fb-root’/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!– Google +1 –>
<script type=’text/javascript’>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!– Twitter –>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js’ type=’text/javascript’/>
</b:if>
<!– Scripts End –>
<!– Horizontal social buttons Start –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’horizontal-social-buttons’>
<h2>SPREAD THE LOVE, SHARE OUR ARTICLE</h2>
<!– Facebook Like+Send –>
<div style=’float:left;’>
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
</div>
<!– Twitter –>
<div style=’float:left;’>
<a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’en’ data-related=” data-via=” expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’https://twitter.com/share’>Tweet</a>
</div>
<!– Google +1 –>
<div style=’float:left;’>
<g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
</div>
<!– Delicious Save –>
<div style=’float:left;’>
<a class=’delicious-button’ href=’http://delicious.com/save’>
&lt;!– {
url:&quot;<data:post.url/>&quot;
,title:&quot;<data:post.title/>&quot;
,button:&quot;wide&quot;
} –&gt;
Save on Delicious
</a>
</div>
<!– Email Post –>
<div style=’float:left;’>
<a class=’email-post’ expr:href=’data:post.sharePostUrl + &quot;&amp;target=email&quot;’ expr:title=’data:top.emailThisMsg’ target=’_blank’>Email This Post</a>
</div>
</div>
</b:if>

• Now save your template
• Done!