Advanced Feedburner Subscription Box for Blogger

Previously i posted a tutorial on adding a shiny Feedburner subscription widget. This widget is the 2nd version of that subscription gadget. This time it's very classic and looks clean.

This subscription widget is one of the best Blogger Gadget i have designed, the work of this gadget is simple but the looks it has got with CSS3 makes it professional.

Activate Email Subscription for your Feed

First of all you have to enable Email subscription for your Feed profile by going on http://feedburner.google.com/, now click on your Feed name. You will see Publicize tab, click on it and one left there will be 'Email Subscriptions' and if you don't have it active you will see 'Activate' button. Just click on it.

But be there, you will need the code you get after you 'Activate' actually you only need the name for your Feed. Your code would look like this.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerHelp24', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<p>Enter your email address:</p>

<p><input type="text" style="width:140px" name="email"/>

</p>

<input type="hidden" value="BloggerHelp24" name="uri"/>

<input type="hidden" name="loc" value="en_US"/>

<input type="submit" value="Subscribe" />

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>

</p>

</form>

On first line you can see this http://feedburner.google.com/fb/a/mailverify?uri=BloggerHelp24 ,
 you can see i have highlighted the word after = in the address, 
'BloggerHelp24' it's the name of my feed. You will also need your feedname. 
So copy it on a text editor for quick use.

The HTML

For the subscription gadget, HTML is the most important part. The HTML code which you will need is as follows.

<div class='subscribe-bh24'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='frm-bh24-btm' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerHelp24', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>

<p id='email-ui'>Subscribe with Email for updates</p>

<div class='inl-9005'>

<p>

<input class='nam-subeml' name='email' style='width:140px' type='text'/>

</p>

<input id='ui015424' name='uri' type='hidden' value='BloggerHelp24'/>

<input id='ui03994' name='loc' type='hidden' value='en_US'/>

<input id='ui63494' type='submit' value='Subscribe'/>

</div>

<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/BloggerHelp24' target='_blank'>BLOG_NAME</a></p>

<div class='attr-bh24'>

<a href='http://bloggerhelp24.blogspot.com/2013/03/advanced-feedburner-subscription-box.html' target='blank'>Get this Gadget</a>

</div>

</form>

</div>

See these edits you have to make

1 : You can see this URL in line http://feedburner.google.com/fb/a/mailverify?uri=BloggerHelp24 You just need to replace the uri with your feed name, check the 'Activate Email Subscription for your Feed' section to know what's your feed name.

2 : You need to do the same changes, in the Value field just put your feed name.
<input id='ui015424' name='uri' type='hidden' value='BloggerHelp24'/>
3: Again the same, just have to replace 'BloggerHelp24' with your feed name and replace BLOG_NAME with your Blog name, you can write any thing there.
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/BloggerHelp24' target='_blank'>BLOG_NAME</a></p>
You just need to make these three changes and the HTML is ready to be applied on your Template.

Where to add the HTML : After you have your HTML ready, put it on a plain text editor such as Notepad.

Go to your Blogger Dashboard | Template
Click on Edit HTML | Proceed (not available if you are using Dynamic Views)
Check mark on 'Expand Widget Template'
Use CTRL+F or F3 to open default on-page search in your Browser
You need to find the following code <div class="post-footer">
And paste the subscription box HTML code above <div class="post-footer">, after you place the code hit Save.

That's the part with HTML, check any of your Post page and see if the subscription box is appearing or not.

Don't worry if it's not styled, we still have to play with the CSS

Show only on Post Page

You may only want this subscribe box to be shown on the index page i.e the Post page. The HTML above will render the subscribe buttons on all types of page but wrapping the subscribe box HTML around Blogger conditional tag you can tell the server to load it only while the page is a Post Page.

<b:if cond='data:blog.pageType == "item"'>

//HTML CODE HERE

</b:if>

The CSS

The CSS is the main stuff that makes the gadget looks so professional and makes it an eye candy. But writing this CSS took me about 2 minutes.

To add this CSS go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box, press enter after the last line and hit Apply to Blog.

.frm-bh24-btm

{



    border:1px solid gainsboro ;

    padding-left:10px;

    border-left:25px solid #62C7FF;

    background:linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 720px 70px;

    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 720px 70px;

    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 720px 70px;

    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 720px 70px;

    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 720px 70px;

    transition: all 0.5s ease-in-out;

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -o-transition: all 0.5s ease-in-out;

    -ms-transition: all 0.5s ease-in-out;

}

.frm-bh24-btm:hover

{

    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 520px 20px;

    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 520px 20px;

    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 520px 20px;

    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuOBPeJgMj3GKQMLQxPpFwaMMFPy6RtdliciO0ak0NgEA-mn02iDzSnvTLQo3Ali974SWn3spEjK_Q6PwBVGK8MoFHxsXDGIe8qt5i4e7odPDnB9Hbs9dDPNNwMNClznYvh4boM1blkQu/s1600/Blogger-02.png') no-repeat 520px 20px;

}

.frm-bh24-btm ::selection

{

    background:#3F6083;

    color:white;

}

.nam-subeml

{

    display:inline;

    border:1px solid lightgrey;

    width:300px !important;

    height:30px;

    padding-left:10px !important;

    font-size:25px;

    color:grey;

    font-family:Arial, Helvetica, sans-serif;

    padding-bottom:5px;

    padding-top:2px;



}

.nam-subeml:focus

{

color:black;

}

.inl-9005 p

{display:inline !important;}

#ui63494

{

    width:100px;

    height:38px;

    top:-2px;

    position:relative;

    border:1px solid darkblue;

    font-family:verdana;

    color:white;

    background:-webkit-linear-gradient(45deg,#5FA3FA,#5494E6);

    background:-moz-linear-gradient(45deg,#5FA3FA,#5494E6);

    background:-ms-linear-gradient(45deg,#5FA3FA,#5494E6);

    background:-o-linear-gradient(45deg,#5FA3FA,#5494E6);

    font-weight:bold;

    font-size:14px;

}

#email-ui

{

    font-size:20px;

    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

    margin-bottom:10px;

    word-spacing:2px;

    letter-spacing:1px;

}

.attr-bh24

{

    display:block !important;

    visibility:visible !important;

    text-align:right;

    padding:10px;

    font-family:'tahoma';

    font-size:14px;

}

.attr-bh24 a

{

    display:inline-block !important;

    visibility:visible !important;

    text-decoration:none;

    border-bottom:1px dotted grey;

}

.attr-bh24 a:hover

{

    display:inline-block !important;

    visibility:visible !important;

    text-decoration:none;

    border-bottom:1px dotted grey;

    background-color:aliceblue;

}

Copy and add this CSS to your Blog. Now check your blog page (should be a post page). If you did it all correct then you will see the subscription box clear and shiny. This can be used on websites or other blogging platform also, just remember that you have to place the HTML and CSS at the right place for it to display correctly.

W3Examiner

Search This Blog