Ask Nithin: 2008

Today im going to Tell how to get a customized feedburner subscription box....

Screenshot:

My experiments revealed that a beautiful subscription box beneath a post leads to more subscribers So lets start now....

Firstly You need to have a beautiful design. Learn how to design it Here.

If u don't have your own design then u can use my default design. If We assume my design as a container then it has three sections in it as shown below:

If you want to copy code then please copy it from here to avoid getting errors.

The below code is css code for the subscription box.

#containersub {
width: 498px;
}
#leftnav {
float:left;
width: 164px;
height:137px;
margin: 0px 0px 0px -20px;
}
#middlenav {
float:center;
width: 164px;
background:url(http://i482.photobucket.com/albums/rr183/nithin1234/Tricks/subsc3.png);
height:149px;
margin: 0px 0px 0px 143px;
}
#rightnav {
float:right;
width: 164px;
height:137px;
margin:0px -38px 0px 0px;
}<div id='containersub'>
<div id='rightnav'>
<a href='http://www.google.com/support/feedburner/bin/answer.py?answer=79408'><img alt='What's Rss' border='0' src='http://i482.photobucket.com/albums/rr183/nithin1234/sub2-1.png' title='What's RSS'/></a>Delivered by <a href='http://www.feedburner.com' target='_blank'>FeedBurner</a></div>
<div id='leftnav'>
<a href='http://feeds.feedburner.com/AskNithin'><img alt='Subscribe via RSS' border='0' src='http://i482.photobucket.com/albums/rr183/nithin1234/Tricks/subsc1.png' title='Subscribe via RSS'/></a>
</div>
<div id='middlenav'>
<form action='http://www.feedburner.com/fb/a/emailverify' method='post' onsubmit='window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2457578', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div style='margin: 0 0 0 9px;'>.</div>
<div style='margin: 25px 0 0 9px;'><span style='color: rgb(255, 255, 255);'>Or Subscribe by E-mail:</span></div>
<input name='email' style='width:140px; margin: 0 0 5px 10px;' type='text'/>
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=2457578'/>
<input name='title' type='hidden' value='Ask Nithin'/>
<input name='loc' type='hidden' value='en_US'/>
<input style='margin: 5px 0 5px 9px;' type='submit' value='Subscribe'/><br/>
</form></div>
</div>

Lets observe the above code in detail..

#containersub {
width: 498px;
}

Containersub is just defining the width of container.

#leftnav {
float:left;
width: 164px;
height:137px;
margin: 0px 0px 0px -20px;
}
#rightnav {
float:right;
width: 164px;
height:137px;
margin:0px -38px 0px 0px;
}

#leftnav and #rightnav will define the place of left and right sections and their mesurements.

#middlenav {
float:center;
width: 164px;
background:url(http://i482.photobucket.com/albums/rr183/nithin1234/Tricks/subsc3.png);
height:149px;
margin: 0px 0px 0px 143px;
}

#middlenav defines the place of middle image in the middle section and their measurements.

Now all sections are defined, we just need to use the above code to display left,right images and subscription form.
The following code displays the subscription box using above defined sections.

<div id='containersub'>
<div id='rightnav'>

<a href='http://www.google.com/support/feedburner/bin/answer.py?answer=79408'><img alt='Subscribe via RSS' border='0' src='http://i482.photobucket.com/albums/rr183/nithin1234/sub2-1.png' title='Subscribe via RSS'/></a>Delivered by <a href='http://www.feedburner.com' target='_blank'>FeedBurner</a>

</div>

<div id='leftnav'>

<a href='http://feeds.feedburner.com/AskNithin'><img alt='Subscribe via RSS' border='0' src='http://i482.photobucket.com/albums/rr183/nithin1234/sub1-1.png' title='Subscribe via RSS'/></a>

</div>
<div id='middlenav'>

<form action='http://www.feedburner.com/fb/a/emailverify' method='post' onsubmit='window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2457578', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div style='margin: 0 0 0 9px;'>.</div>
<div style='margin: 25px 0 0 9px;'><span style='color: rgb(255, 255, 255);'>Or Subscribe by E-mail:</span></div>
<input name='email' style='width:140px; margin: 0 0 5px 10px;' type='text'/>
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=2457578'/>
<input name='title' type='hidden' value='Ask Nithin'/>
<input name='loc' type='hidden' value='en_US'/>
<input style='margin: 5px 0 5px 9px;' type='submit' value='Subscribe'/><br/>
</form>

</div>
</div>

1st paragraph containersub defines the width of subscription box.

2nd & 3rd Paragraph of "rightnav" & "leftnav" defines the image and outerlinks related to the right and left section of container.

4rth paragraph of "middlenav"defines the image and the subscription form arranged into it. Here Subscription form code given by feedburner is manipulated a bit to suit the image.

I hope u understood the code

and its usage.

If u dont want to understand the code

but just get subscription box into your post then do as given below:

Goto Layout section of you're blog and then goto edit html (Check Expand Widget Templates)

Place the following code before </head>

Now paste the following code after <p><data:post.body/></p>
Get the code from this Link:

http://nithin1234.googlepages.com/Code-2.txt

The following lines are from the above code.Find these lines & replace them by the one's you got from your feedburner account.

1."http://feeds.feedburner.com/AskNithin"
2."http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2457578"
3."http://feeds.feedburner.com/~e?ffid=2457578"
4."Ask Nithin"

NOTE: Do Not replace the whole code with the one given by Feedburner account.
Replace only the above 4 statements in the code.

That's it now you can get the box after every post and increase your readers!!

If you get any errors OR problems then just mail to me or comment here I will help you out...:)

Hii guys....This is my first blogger template released here and this is my second try creating a template 4 blogger...wondering about how was first one....never mind it was not worth a try 4 my very valuable visitors.....

This Template is called as Broken Sword....because the sword is broken...

This template is registered under creative commons license.
Screenshot of Broken Sword Template:

-->[Click To Enlarge]

If you like it download , and enjoy...If you did not like it, then just wait 4 my next release....

Download Broken Sword Template With Ads Block:
http://www.mediafire.com/?ddwgqnz5dog

Features:

1.Special Image View:A "special Image view" to the Template (Find about it here)

2.Subscription Box:A beautifully Designed subscription box after every post.This subscription box can be changed easily.Learn how to do it here.
Screen Shot:

3.Ad Block:An Ads Block as shown in figure...If u don want any ad block ,then u can easily change it...Ill tell u how to do it below...;)
4. Read more option : Expandable Posts hack included. This has been provided by Hackospere. To use it do as given below:

While writing your post

Type your summary here (which you want to show in your post).
<span id="fullpost">
Type rest of the post here (Which you want to hide).
</span>

5. Blog Title & Post Title Swap :Blog title and post title swap is included for better SEO.

6.Comments Count:Comment count 4 all da posts will be displayed.
->Top Navigation Tabs are added.

->In case u dont want "block for ads" in the template

Download Here Template WithOut Ads Block:
http://www.mediafire.com/?glzvuonwqzj

Labels

3 Customized feedburner Subscription Box

1 Special View In blog Posts

0 Broken Sword Blogger Template

Blog Archive