Rich Purple Customized Feedburner Email Subscription Widget For Blogger

Rich Purple Customized Feedburner Email Subscription Widget For Blogger, Pure HTML and CSS Based gadget to add it to blogspot blog. An auto resize widget for blogs.

Rich Purple Customized Feedburner Email Subscription Widget For Blogger
Rich Purple Customized Feedburner Email Subscription Widget For Blogger

VIEW DEMO


Professional email subscription widget for blogger with rich purple color, In our last post we talked about coca cola email subscription box widget for blogger now here is another different widget for blogger blogs. This email subscription widget is based on pure HTML and CSS. Email subscription widget plays an important role in bringing loyal readers to your website or blog because when you publish a new post than all of your subscribed users are getting notified by the email in their Inbox and you get traffic. A blog is known by the number of loyal readers it has. So this email subscription widget is for that purpose. This widget is in dark purple color and hence it looks very professional along with fits with every type of template. It is auto resized widget when you add it to your blog it resizes itself to the given width and height. It has also option of customization. You can customize the color, font and the html and css. So you have complete control on this widget for blogger. I inserted a dark color image because it always attracts the user and hence it will be beneficial for your blog you may see an increase in your subscribed users and readers. The concept is simple more subscribed users and hence more traffic. So choose the best email subscription widget for your blogger blog. And this widget for blogger will help you to reach to your goal.



How to add an email subscription widget to blogger.



HTML PART



Login to your blogger account.
Go to layout.
Hit add a gadget.
Choose HTML/JAVASCRIPT.
Copy the below code and paste it inside the box.
<div class="subscribe_outer10">
<div class="subscribe_wrapper10">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub10">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="YOURID" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailText10" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input class="emailButton10" title="YOURBLOGTITLE" type="submit" value="Signup Now!" />
</form>
</div>
</div>
</div>


HTML Customization



See the text under the <p> tag. Like to get blogger...you can write your own lines .
Insert your own Feedburner ID in place of YOURID.
Insert your blog title or any text you want in place of YOURBLOGTITLE.


CSS PART



Login to your blogger account.
Choose Template.
Hit on the customize button.

Hit on customized button
Hit on customized button
Choose advanced.

Hit on advanced button
Hit on the advanced button

Now a blank box appears for CSS.

Box for css
Box for CSS


Copy the below code, paste it and save template.
/***** Subscribe widget from http://www.avdhootblogger.com *****/
.subscribe_outer10 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSs4O7b9XKCIBc9qGDZoU6ud2nPaW_b6uwKmeTTkNF_bK6uVKaWTPickvDGvTvd1oHfU1wV94xVOkehDYfsvtmy6q6C_w8TFdZZQpVipJN2wuBTEHKaYj4AwZwbMdKBAH2dwAuuAmrAc4/s1600/purple+queen.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper10 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSs4O7b9XKCIBc9qGDZoU6ud2nPaW_b6uwKmeTTkNF_bK6uVKaWTPickvDGvTvd1oHfU1wV94xVOkehDYfsvtmy6q6C_w8TFdZZQpVipJN2wuBTEHKaYj4AwZwbMdKBAH2dwAuuAmrAc4/s1600/purple+queen.png") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #fff; text-shadow: 0px 2px 3px #666;
font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }
#avdhootEmailsub10 { display: block; clear: both; margin: 10px 0; }
.emailText10 { background: url("http://i1314.photobucket.com/albums/t576/trickycafe/email_zpsba22e644.png") no-repeat scroll 10px center #fff; padding: 10px 40px; color: #444; margin: 0 0 15px; width: 70%; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0; box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); }
.emailButton10 { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); border: 0; color: #fff; cursor: pointer; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold; width: 100%; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.emailButton10:hover { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

Blogging Tips

On page optimization blogging tips
The post title before the homepage title.
Google plus pop up widget for blogger
SEO Tips
CSS Tips for google search results and traffic

I hope you liked this email subscription box widget for blogger that is a complete Feedburner customized. Please comment if you feel any problem with adding it to your blog. Thanks for reading this.
Next Post Previous Post