Stylish Newsletter Email Subscribe Widget for Blogger
Pretty posts
From 20+ blogger newsletter email subscribe widget, i have shared one in this post. This newsletter subscribe widget looking gorgeous with it's exclusive design. You can use it anywhere in your website area like sidebar, footer or main content area. Let's see how you use it in your blogger site.
How to Add Stylish Email Subscribe Widget?
To add this email subscribe form on your blogger/blogspot site, follow below step a to z carefully.
- Login to your blogger account
- Go to Dashboard>Layout
- Click on Add a Gadget
- Select HTML>Javascript
- Paste below code into to the empty Content box and then click on Save button.
<style type="text/css">
#LS-Newsletter4-Box {
background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
height: 299px;
width: 408px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 71px;
padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: georgia;
font-size: 15px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 275px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: georgia;
font-size: 15px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 275px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: -36px;
top: 25px;
width: 144px;
border-radius: 5px;
}
</style>
<div id="LS-Newsletter4-Box">
<form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=codiblog" method="post">
<input id="d" name="name" value="Enter Your Name"
onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
<input type="email" id="s" name="email" value="Enter Your E-Mail"
onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
<input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
</form>
</div>
how to i reduce the size to width 300 and height 250?
ReplyDeleteTry to change width and height value from #LS-Newsletter4-Box class.
ReplyDeleteHi there,
ReplyDeleteWhat is meant by "feedburner shortname from action attributes" ? I'm not sure what to replace with the word 'codiblog'?
It's your feedburner name which you will see it at the last of feedburner link. Example: my feedburner link look like [pre]http://feeds.feedburner.com/codiblog[/pre]
DeleteOr See following tips to find it.
1. Go to https://feedburner.google.com
2. Click on your Feed Title
3. Click on Edit Feed Details (You will see it at the top)
4. In Feed Address, after the http://feeds.feedburner.com/ link you will see your feedburner name.
Copy this and replace codiblog with it.
Tnx for tips
DeleteThanks i've been able to add the widget to my blog www.blackwhitenation.blogspot.com.ng
ReplyDeleteFabulous!
ReplyDelete