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.

See Also - Add Beautiful Email Subscription Forms For Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjVxXDiZ6cL2tBCYx8hvA0yauM0qbCO_MJoaPoPo66gX9oK-pqbLSnii1Ja1hnJdmv66PySeg9v3GxgIJTdaFjY9JQ1B998qZ4N0kjLRbCAlVjxCmYBHPGiFdqOvfRueW5deIuQVMSyDA8/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:5px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7B7mp4r7QGckjfR8hf7kVgYWf_bfTlAKJjEN5QH5DamSH6Vberm-JUsiJhLS3fviWzS90Qg74hEANa4911m9Co2QULpbpLxBUnHZfRlEHoWhPV18QrFhTXuIFbEcpMcdWgiSa39qT9wg/s1600/bg-pattern.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYVtPdSGZCKBmNQL5aLnkrhs0DpAYBOrwPD-QRcsEXpKNxekz8stQCznaAVEMMTXcKhVx1zTapBxsqRrpyViNbzShVS3FWHeYBkYoQeEncTqqAUNjwusieppyjI_4JtpwNNesb34l7RwX/s1600/email-small-logo.png) 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="http://feedburner.google.com/fb/a/mailverify" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', '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 

Customization 

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