Monday, July 4, 2011

How to Add Floating Rss Subscribe Box For Blogger

How to Add Floating Rss Subscribe Box For Blogger

This is cool tricks for blogger, You can add Floating Rss
Subscribe Box For  to your blogger, It will show on your
every page, SO you can get more Subscribers, Follow
below steps to add it.

Subscribe Box

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before  ]]></b:skin> tag

.element { position:fixed; bottom:1%; right:1%; padding:10px;  border:1px solid #2FBAF6; }

5. Now Go to Design >>page Element

6.Click Add gadget  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="element">  
<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>
</div>

*Replace YOUR FEED BURNER ID with your Feed URL

8.  Now save  HTML/JavaScript.  you are done.

3 comments:

  1. I really like the your all awesome info thanks!

    ReplyDelete
  2. Its a good widget...i have used it http://quickapti.blogspot.com/...but i didnt make it floating... still i like it...

    ReplyDelete