Friday, August 17, 2012

Add a Beautiful Subscription Box To Your Blogger Blog

Author: Gagan Masoun
Add a Beautiful Subscription Box To Your Blogger Blog
In my previous tutorial I have explained that How to add Stylish Subscription Box For Blogger/Wordpress Sidebar widget.Allow your visitors to subscribe to your posts via a beautiful subscription box. Today, on Blogs Daddy blog I am giving you a simple tutorial on how to Add a Beautiful Subscription Box To Your Blogger Blog.

By using a simple CSS3 code, you can create this widget.Make you blog more attractive with this widget.Let's start the tutorial now.

Beautiful Subscription Box

Live Demo

Add a Beautiful Subscription Box To Your Blogger Blog

  • Go to Blogger Dashboard -> Template -> Take Backup First
  • Now, Click On Edit HTML -> Proceed
  • Press (Ctrl + F) & Search ]]></b:skin>
  • Copy Given Code and Paste Above/Before ]]></b:skin>
#sidebar-subscribe-box{background:url( repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:5px 0}.sidebar-subscribe-box-wrapper{background:url( repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;text-align:center;text-transform:uppercase;padding:1px 20px 10px}.sidebar-subscribe-box-form{display:block;clear:both;margin:10px 0}form.sidebar-subscribe-box-form{display:block;clear:both;width:auto;margin:10px 0 0}.sidebar-subscribe-box-email-field{background:url( no-repeat scroll 10px center #fff;color:#444;width:68%;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ccc;margin:0 0 15px;padding:10px 40px}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;text-shadow:1px 1px 0 rgba(0,0,0,.4);font-weight:700;width:100%;font-family:verdana;text-transform:uppercase;padding:10px}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}
  • Save Your Template and Go Back On Dashboard 
  • Click On Layout Tab -> Add a Gadget -> HTML/JavaScript Widget
  • Copy Given Code and Paste In This Widget
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="" class="sidebar-subscribe-box-form" method="post" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="BlogsDaddy" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" onblur="if (this.value==" "){this.value="enter your email address :)" ;}" onfocus="if (this.value==" enter your email address :)"){this.value="" }" type="text" value="Enter your email address :)" /><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Signup Now!" /></form></div></div></div>
  • Save Widget and It's Done 


Please replace BlogsDaddy (red color) with you own feedburner name.Its all done now.Enjoy blogging.Any question or suggestion ask and share via comments

1 comment:

  1. Thanks for sharing the code..I will certainly use it on my blog..