Add a Socializing Widget For Blogger Below Post Content

Hello Friends,I hope all of you fine.In the previous Post I tell how you add professional popup Facebook Like Box.Now I present a beautiful Social Widget Below post content. Everyone have a desire that it generate more and more traffic for his Blog and Website.There are many methods to boost your traffic,Social Media is also an important source to generate traffic.Now a days,Facebook,twitter,Google+ plays an important role to generate traffic.This widget is designed by Muhammad yaqoob owner of Bloggeryard.com.I thankful to him for providing such a nice social widget

Live Demo

At the top of widget,there is stylish and attractive heading,you can change it according to your choice
There are three position of widget,at top portion you can like,tweet and +1 your post content
In middle portion,you can like Facebook page and follow on twitter widget,It is most important for gaining more likes and followers.
In the last,there is social media like Facebook,Google+,pinterest,twitter haring widget.I just only say that there are three different and most important widget in one widget means 3 in 1 pack.

Steps To Install it On Blogger

Login in Blogger >> Blogger Dashboard >> Template >> Edit template
Find The below Code

<data:post.body/>

Paste the given below code after the code you find.

<b:if cond='data:blog.pageType == "item"'>
<style>
#byard-socializer {
width: 500px;
height: 240px;
border: 1px solid #ddd;
-webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
background: #f1f1f1;
-transition: background 0.50s;
-webkit-transition: background 0.50s;
-moz-transition: background 0.50s;
margin-bottom: 10px;
overflow: hidden;
}
#byard-socializer:hover {
background: #fff;
}
#byard-socializer-title {
text-align: center;
border: 1px solid #2aa4cf;
font-size: 20px;
background: #2aa4cf;
font-weight: 2000;
font-family: oswald;
padding: 5px;
color: #fff;
}
#SocializeIt {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 20px;
}
.heading {
float: left;
padding-right: 20px;
padding-top: 15px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 30px;
font-family: oswald;
}
#followus, #share {
float: left;
border-bottom: 1px solid #eaeaea;
margin-left: -10px;
}
.likeonfb, .followontwitter, .sharing {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 15px;
}
#sw-credits {
float: right;
padding: 3px;
font-size: 10px;
margin-right: 10px;
}
</style>
<script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
if (!_0x2162x1['getElementById'](_0x2162x3)) {
_0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
_0x2162x1['id'] = _0x2162x3;
_0x2162x1['src'] = '//platform.twitter.com/widgets.js';
_0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
};
})(document, 'script', 'twitter-wjs');
</script>
<script type='text/javascript'>
var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
publisher: "
ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<center>
<div id='byard-socializer'>
<div id='byard-socializer-title'>
Socializer Widget By Blogger Yard
</div>
<div id='SocializeIt'>
<font class='heading'>SOCIALIZE IT →</font>
<div class='tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='like'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='plusone'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div id='followus'>
<font class='heading'>FOLLOW US →</font>
<div class='likeonfb'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerYard&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
</div>
<div class='followontwitter'>
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/BloggerYard' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div id='share'>
<font class='heading'>SHARE IT →</font>
<div class='sharing'>
<span class='st_facebook_large' displaytext='Facebook'/>
<span class='st_twitter_large' displaytext='Tweet'/>
<span class='st_googleplus_large' displaytext='Google +'/>
<span class='st_pinterest_large' displaytext='Pinterest'/>
<span class='st_linkedin_large' displaytext='LinkedIn'/>
<span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
<span class='st_email_large' displaytext='Email'/>
<span class='st_sharethis_large' displaytext='ShareThis'/>
</div>
</div>
</div>
</center>
</b:if>

Replace Social Widget By Blogger Yard according to your choice
Replace Bloggeryard with your Facebook and twitter userame
Save Template mission complete

From Writer's Desk

I hope you like this widget very much,It is most important and attractive widgets.I recommended you to implement it and then see its benefit.If you have any problem then contact us or comment below.Happy Blogging and Again Say thanks to Bloggeryard.com owned by Muhammad Yaqoob who designed such a nice socializer widget.