Stylish & Cute Subscription Form Widget For Blogs

Stylish & Cute Subscription Form Widget For BlogsMost 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.


We’re always adding new tools and apps. Sign up to receive our newsletter.

Privacy Policy: We hate SPAM and promise to keep your email address safe.

Article by

Hi! I'm +Ammar Ali Part time Blogger, young entrepreneur, affiliate marketer and student. I help people in bulding a profitable blog easily. Read more about me. You can connect on Twitter, Facebook.

Ammar has written 154 awesome articles for us.

 
Comment below, let me know what do you think?

23 Comments so far add one

  1. Abdulsalam says:

    Awesome Work Bro! Must to say you are an awesome designer!

  2. Extremely nice… thanx for the tut….

  3. Thanks Abdulsalam! I wish you could have some tutorial for wordpress hosted blog ;)
    Anyway, nice tutorial!

  4. Amit Shaw says:

    Nice Work Amar. Your all work is aweosme. Thanks for sharing with us.
    Amit Shaw

  5. iPhone Service Center Chennai says:

    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.

  6. hi, how can i edit DOWNLOADED CODE with my feed url? please help

  7. Can this Widget be used for WordPress and can you please say me the steps to install it or any plugin is available .

  8. Small and attractive:) like it man.

  9. Rahul Kashyap says:

    i need this Subscription box @Ammar Ali Tanks Sharing This Box :)

  10. It looks so nice and eye-catching… Lots of people will love to add it to their website.

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

    • Ammar Ali says:

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

  12. Wow!!! Am using this now! Thank you so very much!!!!!!

  13. 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. ;-)”

  14. Ammar, Thanks for the widget. I just added it to my blog and it looks nice.
    Keep on blowing our minds

Speak Your Mind