RealcomBiz
Pin It

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.

facebook twitter google and subscription box




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!".

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Cool widget.Looks great . Thanks!!
    Check it out on my blog: www.techterrain.blogspot.com

    ReplyDelete
  2. This widgets will help Runescape Moneyyou to get a lot of subscribers to your blog due to the eye-catching customization, and remember that, the more your subscribers the morebuy gw2 Gold your chances of ranking high in search engine

    ReplyDelete
  3. That was exactly what i want. Thanks!

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger