Colorful Raining Email subscription Box Widget For Blogger

Colorful Raining Email subscription Box Widget For Blogger like a colored rain. Very beautiful and attractive to add it to blogspot blogs.

Colorful Raining Email subscription Box Widget For Blogger
Colorful Raining Email subscription Box Widget For Blogger

VIEW DEMO




Colorful rainbow email subscription box widget for blogger that loads very fast and very beautiful and professional for entertainment websites and blogs. This widget is coded in html and css and works with all types of websites if properly inserted. I have given step by step method to add it to blogger with images. So increase your traffic and subscribed users with the help of such widgets. We have shared many widgets for entertainment websites and blogs and this is the next in that series below you will find those many email subscription box widget for blogger that we have already shared for you.

Cross Rainbow email subscription box widget for blogger
Professional strip email subscription box widget for blogger
Multicolor email subscription box widget for blogger
Professional black wood email subscription box widget for blogger
Romantic email subscription box widget for blogger
51 heart email subscription box widget for blogger
Colorful email subscription box widget for blogger
Rich purple email subscription box widget for blogger
Coca Cola email subscription box widget for blogger


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_outer3">
<div class="subscribe_wrapper3">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub3">
<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="emailText3" 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="emailButton3" 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_outer3 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VXU2Uzn9-gTDraL5Xdib13lZ18972XR2mLg7GFmUMus2xz-5mKojbjxuRbNCITyZ54abzWEsUH5o6To08jwVpC3Nf5hsqnLz-u9CxzQsrcQLjw5qFBpTejFMLGa2z-wmInovS0H3SMM/s1600/beauty+2.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper3 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VXU2Uzn9-gTDraL5Xdib13lZ18972XR2mLg7GFmUMus2xz-5mKojbjxuRbNCITyZ54abzWEsUH5o6To08jwVpC3Nf5hsqnLz-u9CxzQsrcQLjw5qFBpTejFMLGa2z-wmInovS0H3SMM/s1600/beauty+2.png") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #000000; text-shadow: 0px 2px 3px #666;
font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }
#avdhootEmailsub3 { display: block; clear: both; margin: 10px 0; }

.emailText3 { 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); }
.emailButton3 { background: #000000; background: linear-gradient(top, #000000 0%, #249334 100%); background: -moz-linear-gradient(top, #000000 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #000000 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; }
.emailButton3: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%); }


Horizontal social sharing widget for blogger
Window effect social media sharing widget for blogger
Google plus pop up box widget for blogger
Image accordion widget for blogger
Blogging Tips
Navigation menu bar widget for blogger


I hope you liked this colorful raining email subscription box widget for blogger. Please comment.
Next Post Previous Post