Cross Rainbow Email Subscription Box Widget For Blogger

Cross Rainbow Email Subscription Box Widget For Blogger, Based on html and css easy to add and fast loading gadget to add to blogspot blogs.

Cross Rainbow Email Subscription Box Widget For Blogger
Cross Rainbow Email Subscription Box Widget For Blogger

VIEW DEMO




Beautiful cross rainbow email subscription box widget for blogger that loads very fast because of based on HTML and CSS. A very nice widget to add it to blogger. We have shared many email subscription box widget for entertainment websites and dating blogs but this is an awesome widget because it is suitable for both kinds of websites a professional and entertaining website. Below are the HTML and CSS code with step by step method to add it blogger blogs. This blogger widget will increase your readers and subscribed users. From SEO point of view it is very important to add it to blogger because more subscribed users mean more loyal and permanent traffic to your blogger blog. It is an important and the top widget for blogger. Take a look other email subscription box widget for us. 

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_outer2">
<div class="subscribe_wrapper2">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub2">
<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="emailText2" 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="emailButton2" 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_outer2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW5qB5qiiVqNTK474nQlsZ05SQErK5MrdGouzldVZPxFQjVo4n_IcCfnCKcqgXSuti_CLL40YplvuugFBjoCauDFRGv9isFBmA2Ja2NXY1VntBcWs4wX9ytcI6vlsFF_QxFM78XqMinA/s1600/beauty+1.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW5qB5qiiVqNTK474nQlsZ05SQErK5MrdGouzldVZPxFQjVo4n_IcCfnCKcqgXSuti_CLL40YplvuugFBjoCauDFRGv9isFBmA2Ja2NXY1VntBcWs4wX9ytcI6vlsFF_QxFM78XqMinA/s1600/beauty+1.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; }
#avdhootEmailsub2 { display: block; clear: both; margin: 10px 0; }

.emailText2 { 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); }
.emailButton2 { 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; }
.emailButton2: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 cross rainbow email subscription box widget for blogger. Please do comment did you like it or not.
Next Post Previous Post