Saturday, July 14, 2012

Attractive Feed Subscription Form Widget For Blogger

This is a Cool Rss Subscribe box. Actually
if we hope to increase our Rss, we must have
good article with attractive subscription gadget.
Therefore visitors force to subscribe via Rss
because they can get quality articles via emails.
Earlier I posted about How To Add Search
Box With Subscriber Gadget For Blogger



1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste One of below code style as your like

Style 1

<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-FsFbieQ3GZE/UABV-yVoQfI/AAAAAAAACKE/V1Aku-s7SII/s1600/btrix-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


Style 2
<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-YSQN11W_1GI/UABWA9X4n_I/AAAAAAAACKM/T0N4wNPe7uw/s1600/btrix-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
Style 3
<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-Ug4YzfUkksc/UABWCxRoTQI/AAAAAAAACKU/ltp9e_ISKHw/s1600/btrix.blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


After paste one of above code
* Replace bloggertrix with your feedburner name

4. Now save your HTML/Javascript'.

    You are done...

1 comment:

  1. I am also updating my feed subscription box. thanks... Visit me for pure entertainment

    ReplyDelete