Most 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
Tip: Copy the code given below and paste it inside this editor to see a 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
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under Blog Posts gadget.
- Click Save button (top right hand corner).
Adding To WordPress
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<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 == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" 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.
Ammar, Thanks for the widget. I just added it to my blog and it looks nice.
Keep on blowing our minds
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. ;-)”
I created this widget for this blog! I’m using custom code to add that widget in sidebar! :D
Wow!!! Am using this now! Thank you so very much!!!!!!
Awesome dude…it so simple and cute design. i loved it..is there any plugin avail for subscription widget in wordpress??
Custom Codes are always better than using plugins ;) Just copy above code and place this in your wordpress sidebar widget!
It looks so nice and eye-catching… Lots of people will love to add it to their website.
i need this Subscription box @Ammar Ali Tanks Sharing This Box :)
Small and attractive:) like it man.
Can this Widget be used for WordPress and can you please say me the steps to install it or any plugin is available .
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 .
hi, how can i edit DOWNLOADED CODE with my feed url? please help
Just find “Allbloggingtips” in above code and replace it with your feed ID.
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.
This cute subscription form works for blogger as well as wordpress too. Go Ahead and give it a try!!
Nice Work Amar. Your all work is aweosme. Thanks for sharing with us.
Amit Shaw
Thanks Ammit Saw. Glad you like that widget.
Thanks Abdulsalam! I wish you could have some tutorial for wordpress hosted blog ;)
Anyway, nice tutorial!
LOL amrik its Ammar not abdul :P
Extremely nice… thanx for the tut….
Awesome Work Bro! Must to say you are an awesome designer!
Thanks Abdulsalam. I hope you will try this widget I am coming soon to see that widget on your blog :D
Sure i will use this in my blog. But in a Customized way :D