You might also like

Loading...

Prompt
0%

Beautiful Rss Subscription Feed Box Widget

July 23, 2015 Blogger GadgetsBlogger Widgets
-- min read -- words
0 Prompts
Beautiful Rss Subscription Feed Box Widget
In this tutorial i'm going to explain how to add Rss Feed Subscription Widget for your blogger website or blog.



DEMO



1. Log in to blogger account
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<style>
.bordered {
    border: solid #ff7417 2px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;      
}
.bordered2 {
height: 25px;
    background-color: #ff7417;
    -webkit-border-top-left-radius: 6px;
    -khtml-border-radius-topleft: 6px;
    -moz-border-radius-topleft: 6px;
     border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px;
    -moz-border-radius-topright: 6px;
     border-top-right-radius: 6px;    
     text-shadow: 0 1px 0 rgba(255,255,255,.5);
     border-top: solid #ffffff 1px;
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/bloggersstand" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBJ0YZoo-GBG1VmS2Ax6ti8nQLhfKD600k-MuXy9bjRrywGZjQqAmoIhuG0BnqaiRGXhgPdtAXjG3vKv1cC5zgldQY97eV5P7ZRJk_iEtmFGxcDX0KsLSVUcI6liZRMPTvzLTYHUrURM/s1600/RSS-Reader-Book-icon.png"/></a><p><a href="http://feeds2.feedburner.com/bloggersstand" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: #ffffff; font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#ffffff; background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="bloggersstand" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>

  •  Change bloggersstand with your Feed username.

5. Now save your 'HTML/Javascript'.. Done !
You May Also Like
Discover more amazing prompts

Scan QR Code

Scan with your phone to open this prompt