P2 Professional Purple Strip Email Subscription Box Widget For Blogger

P2 Professional Purple Strip Email Subscription Box Widget For Blogger, Very professional and easy to add to blogger blogs based on HTML and CSS.

P2 Professional Purple Strip Email Subscription Box Widget For Blogger
P2 Professional Purple Strip Email Subscription Box Widget For Blogger

VIEW DEMO




P2 Professional purple strip email subscription box widget for blogger blogs. It is purely based on HTML and CSS and very easy to add to blogspot blogs. Below is the HTML and CSS code easy and fast to load . Email subscription box widget plays an important role in bringing traffic to your blog so without wasting time add it to your blog it is a very attractive widget for blogger as it looks beautiful and professional and that is the reason it is very suitable for all kinds of websites. We shared many kinds of email subscription widget for blogger that includes a widget for entertainment websites and professional websites or blogs. You can see them below this paragraph. And there are many more to come for professional websites right now we shared widgets for sidebar and soon in next series we will share Leaderboard email subscription box widget for blogger.

Coca Cola email subscription box widget for blogger
Multicolor curtain 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 diamond email subscription box widget for blogger
Rich purple Feedburner customized 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_outer">
<div class="subscribe_wrapper">
<p>Get Blogger Widgets Straight to your Inbox by submitting your Email ID below.</p>
<div id="avdhootEmailsub">
<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="emailText" 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="emailButton" 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_outer { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifrL15OtFnkw69bbQwEF0C0OlAL-ZdZnYLJxmM-8EDwxnyurmF4BwT2rvuAXczMt_NNE3WyxG0qty5KO2WOL_tpXzPr2mRP06UFA-qpWgUaIIy8Ivftrk_XjctS9uXCppNrI2cyQGYcss/s1600/purple+strip.png") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }
.subscribe_wrapper { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifrL15OtFnkw69bbQwEF0C0OlAL-ZdZnYLJxmM-8EDwxnyurmF4BwT2rvuAXczMt_NNE3WyxG0qty5KO2WOL_tpXzPr2mRP06UFA-qpWgUaIIy8Ivftrk_XjctS9uXCppNrI2cyQGYcss/s1600/purple+strip.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; }
.sidebar .subscribe_wrapper h5 { color: #fff; }
#avdhootEmailsub { display: block; clear: both; margin: 10px 0; }

.emailText { 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); }
.emailButton { 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; }
.emailButton: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%); }



I hope you liked this p2 purple professional purple email subscription box widget for blogger, Please do comment and share it.
Next Post Previous Post