Thursday, March 15, 2012

Customize Subscription Box With Sharing Buttons

Subscription box play a very important  role for your blog. Its should be look good and attractive. On requesting by a our reader I have designed a subscription box with sharing button (Facebook, Google plus and Twitter) with a hard work on it and Finally, it is available for your blog. I found this subscription box at SML. This is simple but unique Subscription box. I tried to minimize the coding so that this subscription box can easily load on your blog and will not effect you blog speed. So here is the code for this subscription.



Add Customize Subscription box with sharing buttons

  1.  Go to blogger > Design > Page Element 
  2. Add a Gadget, where you want this Widget
  3. 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 {
background:#C8E993;
border: 1px solid #CCC;
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"><h3>Stay Connected</h3>
<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> </div>
</div></div>
      4. Change probloggingtools your Facebook Page name/id.
      5. Edit probloggingtool Twitter Name with yours twitter id.
      6. Edit Google Plus Link url with yours
      7. Edit Feed burner URI with your, probloggingtools
      8. Change 111188040805340254482  Google plus Circle ID with yours Circle id.
      9. Now, Go to Blogger > Design > Edit Html
     10.Backup your template
     11. Add Google Plus 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>
      12. Save Template and Visit your Blog again.

Credits

This Subscription box is developed by SML, and Customize by PBT. If you want to share this Subscription box, 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. 

2 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...