Add Facebook, Twitter, Google + Button And Facebook Like Box To Blogger. ~ Khatris Creation

hello guys and welcome to khatris creation .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=khatrscreation" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/khatriscreation" target="_blank">RSS</a></h4>

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=khatriscreation', '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 == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')

{this.value = '';}" 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%2Fkhatriscreation&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/khatriscreation" 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.khatriscreation.blogspot.com"></g:plusone>

</div>

<a href="https://plus.google.com/u103411954659172316653" 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/khatriscreation" class="twitter-follow-button">Follow @khatriscreation </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%2Fkhatriscreation&width=297&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:297px; height:258px;" allowTransparency="true"></iframe>

</div>

</div>

</div></div>

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

hope you like this widget

if you have any trouble with this widget contact me by email sudershankhattri26@gmail.com

About sudarshan khatri

Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.

Add Facebook, Twitter, Google + Button And Facebook Like Box To Blogger.

About sudarshan khatri

Related Post