Add Facebook, Twitter, Google + Button And Facebook Like Box To Blog

In this tutorial, i will sharing with you, how to add a stylish and customize widget which comprises of a facebook like button, twitter follower button, google + button, and facebook like box. This widgets will help you to get a lot of subscribers to your blog due to the eye-catching customization, and remember that, the more your subscribers the more your chances of ranking high in search engine, and your subscribers will be updated with your latest post directly into their email. For you to add this widget to your blog simply follow the few steps below.

How To Add Google Plus Script To Template

The first step is, adding google plus script to your template, but if you have already add it, then ignore this stage.

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find </head> and paste the following code before/above </head> 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>

• Click "SAVE TEMAPLATE"

How To Add The Widget To Blog

• Go to your blogger dashboard
• Click on "Design" > "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadgets
• Copy and paste the code below in the content box provided

<style type="text/css">
/* RB Style sheet for subscription box */
#rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #rb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #rb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #rb-subscribe-box .email-box .txt,#rb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
        #rb-subscribe-box .email-box .btn,#rb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
            #rb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}

#rb-text {

border: 4px solid #C8e993;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#rb-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
}
</style>
<div class="rb_widget">
<div id="rb-text">
<div id="rb-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=realcombiz" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/realcombiz" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=realcombiz', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="realcombiz" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
    </div>
    <div class="fb-like-box">
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Frealcombiz&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" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/realcombiz" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
    <div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.realcombiz.com"></g:plusone>
</div>
<a href="https://plus.google.com/u/0/117896762172961615212" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>   
    </div>
    <div class="twitter-follow">
  <a href="https://twitter.com/realcombiz" class="twitter-follow-button">Follow @realcombiz </a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> <br/>
<div >
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Frealcombiz&amp;width=297&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:297px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
</div></div>

• Replace realcombiz with your feedburner feed username
• Replace realcombiz with your facebook fan page username
• Replace https://plus.google.com/u/0/117896762172961615212 with your google plus profile url
• Replace realcombiz with your twitter username
• Replace http://www.realcombiz.com with your blog/site url
• Click "SAVE TEMPLATE" when you are done with your editing.

Hope you like this widget? If so, take few seconds to share it and don't forget to subscribe to this blog now, for you to receive our latest post directly into your email, but you need to confirm your subscription in your email.
Please your opinion is highly needed, which widget can you recommend for us between this widget and the current one on our blog? share your suggestion using the comment box below.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz