How to add Beautiful Rss Subscribe Box to blogger

How to add Beautiful Rss Subscribe Box to blogger

This gadget is helps to get more RSS readers.


1.  Log in to your blogger account and Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below one of below code.

<div class="rss_box">Sign up to receive latest Update free</div>
                <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED BURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="rss_form">
                    <input type="text" name="email" id="email_rss" value="Enter your email!" onblur="if (this.value == '') {this.value = 'Enter your email!';}"  onfocus="if (this.value == 'Enter your email!') {this.value = '';}" />
                    <input type="submit" name="subscribe_email_btn" id="subscribe_email_btn" value="" />
                    <input type="hidden" value="technology/tricks" name="uri"/>

                    <input type="hidden" name="loc" value="en_US"/>
                </form>
<style>
.rss_box { /*in content */
    display: block;
    background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/rss_icon.jpg);
    background-repeat:no-repeat;
    padding-left: 40px;
    height: 40px;
    border: 0;
}
#sidebar #rss_form { /*in content */
}
#rss_form #email_rss {
    background: none;
    border: 1px solid #CCCCCC;
    margin: 0px 0px 0px 7px;
    padding: 2px 3px 0px 30px;
    width: 182px;
    height: 18px;
    outline: 0;
    color:#666666;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size:12px;
    background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/email.png);
    background-repeat:no-repeat;
    background-position: 5px 3px;
}
#rss_form #subscribe_email_btn {
    width:50px;
    height:21px;
    border:none;
    background:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/go.png) no-repeat;
    cursor:pointer;
    margin-left: 7px;
}

</style>

*Replace YOUR FEED BURNER ID with your Feed URL

4. Save HTML/Javascript. you are done.