Thursday, March 15, 2012

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.


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.

1 comment: