Subscription Widget With Facebook Like Box V2

Customized Subscription Widget with Facebook Like box is another version of the previous Customize Subscription box with sharing buttons. I designed this widget on requesting by our blog reader. If you also want any personalized widget for your blog then feel free to ask here. Now, Come on point in this widget there are four thing one is subscription box, second is Facebook Like button with page URL, third is Google plus page URL with button now the change is fourth which is Facebook like box. Its looks different and cool for your blog. The main important things in this widget is its loading as well as its simplicity. With help of this widget you can attract many followers for your blog.  To add this widget in your blog, follow these steps.

Steps to add Subscription Widget With Facebook Like Box

1. Go to blogger > design > Page Element 
2. Add a Gadget where you want to show this widget.
3. Select HTML/JavaScript
4. paste the following code in the Gadget

<style type="text/css">
/* PBT Style sheet for subscription box */
#pbt-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #pbt-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #pbt-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #pbt-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #pbt-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #pbt-subscribe-box .email-box .txt,#pbt-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;}
        #pbt-subscribe-box .email-box .btn,#pbt-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;}
            #pbt-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}

#pbt-text {

border: 4px solid #C8e993;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#pbt-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="pbt_widget">
<div id="pbt-text">
<div id="pbt-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=probloggingtools" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/probloggingtools" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=probloggingtools', '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="Probloggingtools" />
<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%2FProBloggingTools&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/probloggingtools" 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.probloggingtools.com"></g:plusone>
</div>
<a href="https://plus.google.com/111188040805340254482/posts" 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/probloggingtool" class="twitter-follow-button">Follow @probloggingtool </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%2Fprobloggingtools&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>

      5. Save the Gadget.

Add Google Plus Script, If already added then ignore this

      1. Go to Blogger > Design > Edit Html
      2. Backup your template 
      3. Add Google plus button script before </head>.

 <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>

Further Customization

• Change probloggingtools your Facebook Page name/id.  
• Edit probloggingtool Twitter Name with yours twitter id.  
• Edit Google Plus Link url with yours  
• Edit Feed burner URI with your, probloggingtools  
• Change 111188040805340254482  Google plus Circle ID with yours Circle id.

Credits

This widget is Customize by PBT and having all rights. If you want to share this Widget, you have to give credits to PBT by attaching a link back to this blog.

Need Help?

If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time. 
I Have designed this widget on requesting by a reader. If you also want any widget for blogger or WordPress or any website, Feel Free to do comment.