Wednesday, June 29, 2011 | By: Goutham Baratam

How to add Beautiful Rss Subscribe Box to blogger

How to add Beautiful Rss Subscribe Box to blogger


feed burner,rss follower

This gadget is helps to get more RSS reader.

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.
Related Posts Widget for Blogger

1 comments:

USMLE Step 3 said...

Thanks for posting this! I just started a blogging project with my students, and, like some of them, I have been feeling nervous about putting myself out there. Your thoughts have given me the confidence to go forward. I can't wait to share this with the kids!

Post a Comment