Multicolor Curtain Email Subscription Box Widget For Blogger

Rohan Mod
24 Jun, 2013

Multicolor Curtain Email Subscription Box Widget For Blogger, Like a curtain different colors are emerging in this customized beautiful Feedburner subscription box gadget for blogspot blogs.


Multicolour Curtain Email Subscription Box Widget For Blogger
Multicolor Curtain Email Subscription Box Widget For Blogger

VIEW DEMO



An email subscription box widget for blogger in multicolor looking very beautiful like a curtain. This is another widget in the category of entertainment websites because it is enriched with fancy colors. We have shared many other widgets in category of email subscription box widget. This widget has some CSS hover effect, color changes in red from black after hovering mouse cursor on the sign up button. The background image of this email subscription box widget is too fancy and that is why perfect for colorful websites. Simply copy and paste code , pure HTML and CSS. I have written all the methods for how to add the email subscription box widget to blogger that includes editing your blogger template. So just add this multicolor curtain like widget to your blogger that will help you to increase your subscribed users and loyal permanent traffic.

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_outer4">
<div class="subscribe_wrapper4">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub4">
<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="emailText4" 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="emailButton4" 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_outer4 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvIAXVTA-6auwPJKvfsplAHlMeh9JurkeK3M2UjVjn41ldXrYQEOY8eR57oyf3tqSNwlq6uZVORG_lmTLKzMexil-qLBZN9f-GsRfp2NQw7otk-k41zx8zCteusJ-Pl_YtJAqMLmk8zw/s1600/beauty+3.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper4 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvIAXVTA-6auwPJKvfsplAHlMeh9JurkeK3M2UjVjn41ldXrYQEOY8eR57oyf3tqSNwlq6uZVORG_lmTLKzMexil-qLBZN9f-GsRfp2NQw7otk-k41zx8zCteusJ-Pl_YtJAqMLmk8zw/s1600/beauty+3.png") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #000; text-shadow: 0px 2px 3px #666;
font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }
#avdhootEmailsub4 { display: block; clear: both; margin: 10px 0; }

.emailText4 { 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); }
.emailButton4 { background: #000000; background: linear-gradient(top, #000000 0%, #0c0c08 100%); background: -moz-linear-gradient(top, #000000 0%, #0c0c08 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #0c0c08)); background: -webkit-linear-gradient(top, #000000 0%, #0c0c08 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; }
.emailButton4:hover { background: #b50b42; background: linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -moz-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50b42), color-stop(100%, #cd0c4b)); background: -webkit-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); }


Tabbed social media sharing widget for blogger
Tabbed content box widget for blogger
The post title before the homepage title
Related posts widget for blogger
Popular posts widget for blogger
Comments widget for blogger

I Hope you liked this multi-color email subscription box widget for blogger, A complete feed burner subscription box widget. Please comment we need your appreciation. Thanks for visiting this page.
Next Post Previous Post