Socializer Widget For Blogger - Increase Social Traffic

In the blogging world, traffic is most important for every blog owner. Because if you have no traffic then your blog is nothing. There are thousands of ways to boost the traffic of your blog. Social media promotion is also one of them because nowadays almost every internet user is using social media sites like Facebook, Twitter and Google Plus. Keeping this thing in the eye, that is a great occasion for a blogger to get traffic from social networking. As we've told you that we're going to share our resources on blogger, So here is our first resource which will help you to get visitor hits from social sites. We've created a widget and named it "Socializer Widget" because this widget is having such great social buttons which is needed for every blog.

Socializer Widget

This is a great widget which is having amazing buttons with dashing design. At the top of this widget it shows a stylish heading, You can also change that heading to yours. In the second portion which is "Socialize It", it is having three major site buttons which are Tweeting, Like and Plus one. These buttons are for liking or tweeting your current post. Third portion is "Follow Us" and here we've added a Facebook fan page like button and Twitter follow button. In the end, the fourth portion is "Share It" there we've implemented some share buttons that will share your current post. And the share button plugin is adapted from "Share This" because it may not down and your readers may enjoy sharing your post on all social sites.

The best place for implementing this widget is under every post. So that it may fit on your blog with it's 500 pixels wide. This widget is having white smoke background color but when someone will hover the mouse on it and it will be changed to white with awesome effect. This is also having shadow that will attract your readers to like, follow or share. You can see the live demo of this by pressing the below button.

LIVE DEMO

Installing Socializer Widget In Blogger

After getting knowledge about this widget, now you may want to install it in your blog. So this is free for everyone and you can easily install it by following the simple steps below.

• Go To Blogger >> Template >> Backup Your Template
• Go To Edit HTML and Click Anywhere In The Coding Box To Active It.
• Press CTRL+F and Find For Below Code.

<data:post.body/>

• Just Below Above Found Code Paste The Following Code.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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[&#39;getElementsByTagName&#39;](_0x2162x2)[0];
    if (!_0x2162x1[&#39;getElementById&#39;](_0x2162x3)) {
        _0x2162x1 = _0x2162x1[&#39;createElement&#39;](_0x2162x2);
        _0x2162x1[&#39;id&#39;] = _0x2162x3;
        _0x2162x1[&#39;src&#39;] = &#39;//platform.twitter.com/widgets.js&#39;;
        _0x2162x4[&#39;parentNode&#39;][&#39;insertBefore&#39;](_0x2162x1, _0x2162x4);
    };
})(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
   </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: &quot;
            ede9503f - 57ea - 4698 - a245 - 17187b93fa50 &quot;, 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 &#8594;</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='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' 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 &#8594;</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&amp;send=false&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;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 &#8594;</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 Socializer Widget By Blogger Yard With Your Heading.
• Replace First BloggerYard With Facebook Page Username and Second BloggerYard With Twitter  Username. 
• Click "Save Template" and You Have Done!