51 Heart Email Subscription Widget For Blogger and Dating Websites

51 Heart email subscription box widget for blogger and dating websites, Purely designed in HTML and CSS for entertainment websites with auto resize ability.

51 Heart Email Subscription Widget For Blogger and Dating Websites
51 Heart Email Subscription Widget For Blogger and Dating Websites

VIEW DEMO





51 flying heart email subscription widget for blogger and specially for dating and entertainment websites and blogs. Built in HTML and CSS with dark red color and with auto resize ability. Its liquidity is awesome. This email subscription box is perfectly suitable for entertainment websites and dating websites. In dating websites they talk about love and other stuff so this email subscription box is good for them because it's background is love based image. This widget can also be used for entertainment websites where they talk about celebrity gossips so this will completely justify to their websites. This email subscription widget has some CSS Hover effect as you move your cursor on the sign up now button it changes its colors and when user types his email then it leaves a shining yellow border around the box. It is specially coded for blogger. Below are the HTML and CSS code for adding this email subscription widget to blogger. In the past we have shared another beauty widget named as diamond email subscription widget for blogger and coca cola email subscription box widget for blogger. You can also use from them for your websites and blogger blogs. So add this heart email subscription widget to blog as it may increase your traffic and permanent loyal readers.

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_outer9">
<div class="subscribe_wrapper9">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub9">
<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="emailText9" 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="emailButton9" 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_outer9 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvEt_-ke_fZjbzqUsbsHyAN5-HLPjOyaIzcDeViBk1kRSoBn7sSlOy_WPOnW0YqsABzOjSv8V-K3px8DGqdxs9N1GjeCVCwYdHxu0mrqZkT3i66bX-9SXnorIeC0xkiO5_6bEiBCTiAI/s1600/heart+for+dating+website.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper9 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvEt_-ke_fZjbzqUsbsHyAN5-HLPjOyaIzcDeViBk1kRSoBn7sSlOy_WPOnW0YqsABzOjSv8V-K3px8DGqdxs9N1GjeCVCwYdHxu0mrqZkT3i66bX-9SXnorIeC0xkiO5_6bEiBCTiAI/s1600/heart+for+dating+website.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; }
#avdhootEmailsub9 { display: block; clear: both; margin: 10px 0; }

.emailText9 { 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); }
.emailButton9 { 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; }
.emailButton9: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%); }

Image accordion widget for blogger
Tabbed content box widget for blogger
Tabbed social media widget for blogger
Black navigation menu
Fashion style navigation menu
Dashed rich navigation menu

I hope you liked the 51 heart email subscription box widget for blogger , Please comment if you feel any problems in adding it.
Next Post Previous Post