Romantic Email Subscription Box widget For Blogger For Dating Sites

Romantic Email Subscription Box widget For Blogger For Dating Sites with auto resize ability and based on pure html and css after making Feedburner subscription for blogspot blogs.



Romantic Email Subscription Box widget For Blogger For Dating Sites
Romantic Email Subscription Box widget For Blogger For Dating Sites

VIEW DEMO




Romantic email subscription box widget for blogger blog. It is too tough to find a relevant email subscription box for dating blogs but I am sharing a widget which totally justifies to entertainment websites. A perfectly suitable email subscription box widget for such blogs and websites. We have applied some css hover effect in this widget. It changes colors when you hover your mouse cursor on the sign up button. The background image also matches with such templates for entertainment and dating websites. This widget will help you to get more loyal readers for your website and permanent traffic. The logic is simple more subscribed users means more traffic to your blog. Below are the complete HTML and CSS codes to make this widget it is a simple copy paste code. Just add it and see the increased users on your blog. A very handy and colorful widget for blogger blog. You will have the complete control on this widget because it is customizable, You can customize its font. Background images and colors too that suits to your blogger template. There are few more subscription widget for your blog like.

Coca Cola email subscription box widget for blogger
51 Heart email subscription widget for blogger
Diamond email subscription widget for blogger
Purple email subscription 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_outer7">
<div class="subscribe_wrapper7">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub7">
<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="emailText7" 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="emailButton7" 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_outer7 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4Ux54OYSmKJSsZDrgJhy8GoKaqyQ5XaEezaLVXhoHX7AON5HMa71-PrvdCjcLt_W3Gcm_AGPsU6_PdnM-WcHr5nmKaz37sI3iKzaqUeoMzUU0q8UQZQKVZIwn0_mnZw9ewd65JjaiCo/s1600/diamond+1.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper7 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4Ux54OYSmKJSsZDrgJhy8GoKaqyQ5XaEezaLVXhoHX7AON5HMa71-PrvdCjcLt_W3Gcm_AGPsU6_PdnM-WcHr5nmKaz37sI3iKzaqUeoMzUU0q8UQZQKVZIwn0_mnZw9ewd65JjaiCo/s1600/diamond+1.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; }
#avdhootEmailsub7 { display: block; clear: both; margin: 10px 0; }

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


Fashion navigation menu bar
Go to top of page widget for blogger
Window effect social media sharing widget for blogger
The post title before homepage title
Comment widget for blogger
Related posts widget with thumbnails for blogger

I hope you liked romantic email subscription box widget for blogger that is completely cutomizable with feedburned ID. Please comment if you face any problems in adding it.
Next Post Previous Post