Customize RSS Feeds Subscription Style

RSS is an acronym for Really Simple Syndication and Rich Site Summary, and it’s being used by millions of web users around the world to keep track of their favorite websites.

Almost webmasters want to have a lot of subscriber for they sites. Many tricks and tips to get it. Some people use a premium content as a prize for a people who follow or subscribe their sites. Some of them using pop up for subscription box, and many else. Now i want to try share blogger trick about how to customize RSS feeds subscription box style. Hope it can bring more subscriber to our sites.

Follow simple and easy step to adding this cool box in your blogger blog.

1. First go to your blogger Dashboard.
2. Now click in design tab and edit HTML.
3. Now click in small box to expand your blogger template.
4. Find this code ]]</b:skin> by CTRL+F key.
5. Now copy below code and paste before ]]</b:skin>

#subscribe {font-size:14px; color:#999;}
.subscribetext {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzeCPHbnh4jIOlVWchIM7bdCkNX_fRuQtxevOpa0VhAu6Zi7brbw7vemGUf-DUHiDVWl0x4z9e07S6-Oi0EOxfkQyDCJF0hGBCatr5C2YzUNvXVHnywPeOryhyphenhyphenvUVTAhBjGIrFRWOPQP9/s400/bullet.png) left no-repeat; padding-left:20px; margin-bottom:20px;}
.subscriberss {line-height:35px; font-size:18px; border-bottom:1px dotted #CCC; padding-left:5px;}
.subtext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXtYed0pzvE7EgV3w8MFdP6XscXmS6PLSIndXIxK_3Gp_mFRBeA4Uo288aHFQ0az-neXryQN47OjuvGqmQS_V2kyup6KO5_2XraxIUjHgJXrMPvwxllNNYXnfy1WkMXCtME1SUPU6Q052/s400/feed.png) left center no-repeat; padding-left:37px; padding-bottom:5px;}
.twitter {line-height:35px; margin-bottom:15px; font-size:18px;border-bottom:1px dotted #CCC;}
.twittext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbaiOobICWoSWMCtNEGycWyT2fkcHE722hDQr1h7r2wJnpq5_Pdv2_GKZ1UsbXBtMSrBFKssfs8Oa1BHkdC93bpJMM3K_vpNWWX3unxSQNQqkySKJ93BdszmnlO3JmWCiKGGDfy9Ej2J3/s400/twitter.gif) left no-repeat; padding-left:42px;}
.subscribemail {margin-bottom:7px; font-size:11px; font-family:Arial, Helvetica, sans-serif;}
.subscribeinput{border:1px solid #CCC; width:180px; padding:3px;}
.subscribesubmit{ background:#FB9E3D; color:#fff; border:1px solid #FFF; font-family:Arial, Helvetica, sans-serif; padding:3px; width:70px; -moz-border-radius:5px;}
.facebook {line-height:35px;font-size:18px;border-bottom:1px dotted #CCC;margin:-10px 0 15px 0;}
.facetext { background:url(http://www.longislandcateringhalls.com/i/facebook-icon.png) left no-repeat; padding-left:42px;}

6. Now click to save your blogger template.
7. Again go to your blogger Dashboard.
8. Click in design tab and Page element.
9. Now click in add gadget which is in sidebar and when open new window click in HTML/javascript from list.
10. Copy the below code and paste it.

<div class='widget-content'>
<div id='subscribe'>
<div class='subscribetext'>Subscribe to our newsletter updates!</div>
<div class='subscriberss'><a class='subtext' href='YOUR FEEDBURNER URL HERE'>Subscribe via RSS feed</a></div>
<div class='twitter'><a class='twittext' href='YOUR TWITTER URL HERE'>Follow us on Twitter!</a></div>
<div class='facebook'><a class='facetext' href='YOUR FACEBOOK URL HERE'>Join Us On Facebook !</a></div>

<div class='subscribemail'>OR, subscribe via Email</div>

<form action='http://www.feedburner.com/fb/a/emailverify' id='subscribeform' method='get' onsubmit='window.open(&apos;http://www.feedburner.com&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class="subscribeinput" id="sub" name="email" type="text" value="" /><input name="url" type="hidden" value="YOUR FEEDBURNER EMAIL URL HERE" /><input name="title" type="hidden" value="WordPress" /><input name="loc" type="hidden" value="en_US" /> <input class="subscribesubmit" type="submit" value="Sign up" />
</form>
</div>
</div>

Categories: Blogging , Tutorial