1058 followers
Follow us on Twitter!
260 followers
Join us on Facebook!
Just Follow this step by Step procedure to create newsletter subscription box widget for Blogger with your own custom CSS.
Step 1 :
First we need to have one feedburner account in order to create a subscription form widget.
Register an account in Feedburner.com and then go to Publicize Page , there select Email subscription option in left sidebar. In that click activate button below.
Step 2 : So now you have your own feedburner account. In that code search this tag ” feedid= ” after this there will be 7 digit number save it in a text file .
I am going to share my own feedburner code with you guys. And i will explain all the codes which you need to modify.
First let’s add the CSS required for this subscription box.
/*... Subscription ..*/
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}
To add this code in your template , Go to Edit HTML page of your Blogger template. Then search for this tag ]]></b:skin> .
And add the CSS codes above that tag.
Now let’s add the HTML code to sidebar.
<div id="subscribe">
<a href="http://feeds.feedburner.com/TechnoWizard" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/TechnoWizard?bg=006699&fg=FFFFFF&anim=0" width="88" style="border:0px;" alt="Subscribe Now" height="26"/></a><br/>
<form id="subscribeform" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" 'http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1488667', 'popupwindow', 'scrollbars=yes,width=560,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=1488667" name="url" type="hidden"/><input value="Blogger Accessories" name="title" type="hidden"/><input value="en_US" name="loc" type="hidden"/>
<input src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div></form></div>
To add this code to sidebar , use the option ” Add a Gadget” in layout section of your blogger template and add HTML/Javascript Blogger widget.
As I have told early that the code above is from my own blog. So you need to edit few things to make it compatible for your blog.
<div id=”subscribe”>
<a href=”http://feeds.feedburner.com/TechnoWizard” rel=”nofollow”><img width=”88″ style=”border:0″ alt=”" src=”http://feeds.feedburner.com/~fc/TechnoWizard?bg=006699&fg=FFFFFF&anim=0″ height=”26″/></a><br/>
<form id=”subscribeform” action=”http://www.feedburner.com/fb/a/emailverify” target=”popupwindow” method=”post” ‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1488667‘, ‘popupwindow’, ‘scrollbars=yes,width=560,height=520′);return true”>
<div>
<input value=”" class=”subscribeinput” name=”email” type=”text”/>
<input value=”http://feeds.feedburner.com/~e?ffid=1488667” name=”url” type=”hidden”/><input value=”Techie Blogger” name=”title” type=”hidden”/><input value=”en_US” name=”loc” type=”hidden”/>
<input src=”http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png” class=”subscribesubmit” type=”image”/>
</div></form></div>
Just edit the text in red with your own Feedburner subscription links and details.
First let me discuss the code i have used in my blog and then I will explain how to customize it.
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url(‘http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg‘) no-repeat;
background-color : #ffffff;
overflow:hidden;
}
This is the div element which is going to contain the subscription box.
In this you can change the width and height of the widget to suit your blog. You can also change the background image of the subscription box as well.
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
This codes control the display setting of the text and image shown in the subscription box widget.
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url(‘http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg‘) no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}
0 comments: