Today, in this tutorial, I am
going to show you how to add an Email Newsletter Subscription Widget to the
sidebar column of your Blogger blog/ WordPress blog/ website.
Below is a sample of Email
Newsletter Subscription Widget display.
CLICK HERE TO SEE
To add this Email
Newsletter Subscription Widget to
your blog, follow the following steps:
1.
Log in to your blog admin section.
2.
Go to Layout Menu.
3.
On the
Sidebar Column, Click on Add Gadget. (A Pop-up window appears).
4.
Scroll down and click on HTML/Java Script.
5.
Copy the Code Below and Paste it there.
NOTE: Replace “ExclusiveTechBlog”
with your blog/website FEEDBURNER NAME.
If you don’t have
a FeedBurner, just click here: How
To Create a FeedBurner Account
=====================================
Copy Subscription Code:
=====================================
<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtM_92CHcfKDSzGT3qTZdehjR_GAb8EmJPdwZwumgivp2o6HcielFwNv8Xk6KUv4qcs4rKGdBkAhOTxitjeQgp8MRILu9kS3QE8HsR6YxY2KwzOPam4lcgkywMyaoc8_BdrJfvghhybQ/s1600/mail.png)
no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px
rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px
rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px
1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px
1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div
class="hl-email">
Subscribe via Email <form
action="http://feedburner.google.com/fb/a/mailverify"
id="feedform" method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ExclusiveTechBlog', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<input
gtbfieldid="3" class="textarea" name="email"
onblur="if (this.value == "") {this.value =
"Enter email address here";}" onfocus="if
(this.value == "Enter email address here") {this.value =
"";}" value="Enter email address here"
type="text" />
<input
type="hidden" value="ExclusiveTechBlog"
name="uri"/><input type="hidden" name="loc"
value="en_US"/>
<input
class="hl-emailsubmit" value="Submit"
type="submit" />
</form>
</div>
Post a Comment