Stylish & Cute Subscription Form Widget For Blogs

subscribe box v1 demo abtMost of peoples want simple, clean yet Stylish and Cute Subscription Form for their WordPress and Blogger/blogspot Blogs. Today we came with Stylish and Cute Subscription Form Widget  For Blogs , Easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe. Follow following steps to add this Stylish and Cute Subscription Form Widget to WordPress and Blogspot

 TipCopy the code given below and paste it inside this editor to see a live demo.

Live Demo

Adding Stylish and Cute Subscription Form Widget

You just need to place a code to your blog widget Follow following steps to add Stylish and Cute Subscription Form Widget to WordPress and Blogger.

Adding To Blogger

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

Adding To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
Note: If This widget is not working on you blogspot and wordpress blogs then download this code  and place it as a widget nstead of give below.
 <style>
.abt-email{
background:url(https://lh3.googleusercontent.com/-3mMr7bVkJEA/T2mKAcZEBkI/AAAAAAAAAZI/IWMC_nG_foU/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class='abt-email'>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AllBloggingTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="AllBloggingTips" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Submit" type="submit" />
</form> 

</div>

Now make these changes,

  • Now replace AllBloggingTips with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace AllBloggingTips with your feed title. It appear at the end of your feed link. In my case it is AllBloggingTips

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

23 thoughts on “Stylish & Cute Subscription Form Widget For Blogs”

  1. Ammar,
    Can you explain how to add the widget you have added on your blog saying “Subscribe to Our newsletter and Get Tips About Make Money Blogging in your inbox. ;-)”

  2. Awesome dude…it so simple and cute design. i loved it..is there any plugin avail for subscription widget in wordpress??

    1. Custom Codes are always better than using plugins ;) Just copy above code and place this in your wordpress sidebar widget!

    1. Hi Anirudh. Better if you read above article again. Anyways.
      To Add Stylish & Cute Subscription Form In WordPress Follow Steps given below.

      Go to Dashboard > Appearance > Widgets > Available Widgets.
      Drag Text widget into a sidebar.
      Paste in the code.
      Save.
      Note: If This widget is not working on you blogspot and wordpress blogs then download this code >> https://allbloggingtips.com/wp-content/uploads/2012/03/subscribe-box-cute-simple-abt.txt and place it as a widget .

  3. iPhone Service Center Chennai

    I’ve been searching the subscription form like this for one of my blogger blog, thanks to the post. Will give it a try today.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.