RSS And Email Sidebar Subscription Widget For Blogger
Email subscription and RSS feed subscription sidebar widget for blogger.This cute subscription widget helps your visitors to easily subscribe to posts and also subscribe to your regular email updates and increases the chances of visiting your site and making them regular readers of your site.This widget also has feed count option delivered by feedburner.This widget is fully customised,copy it and paste in html option and check for beautiful widget.Note:It works fine with 300px width gadget.
1, Go To Blogger - Design
2, In Page Elements choose Add a gadget
3, Choose HTML/JAVASCRIPT option
And add the following code,
<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(http://lh4.ggpht.com/_haw3kJHnOsc/S8eA3T23j5I/AAAAAAAAAac/yOw-gfkPfV4/email-rss-bg.png) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}
.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(http://lh3.ggpht.com/_xn2gmPb9TfM/SmjqRgmI4_I/AAAAAAAAEqU/6Ia5qlTjbXc/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(http://lh3.ggpht.com/_xn2gmPb9TfM/S-QDqBEuouI/AAAAAAAAGRE/8krYWAfHeW8/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>
<h2>Get Updates!</h2>
<p class='first'>Subscribe to Free Ads And SEO by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeClassifiedsAndSEOSites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='FreeClassifiedsAndSEOSites'/><input name='loc' type='hidden' value='en_US'/></form>
<p>Be informed of new posts by <a href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=FreeClassifiedsAndSEOSites&loc=en_U'>Email</a> <span class='right'><a href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/FreeClassifiedsAndSEOSites?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>
*Replace FreeclassifiedsAndSeoSites with your feedburner title.
*Replace Free Ads And SEO by your site title.
4.Save your changes.
Tags:subscribe via rss and email,blogger widgets,sidebar subscription widgets,subscription and social bookmarking widgets below every post
<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(http://lh4.ggpht.com/_haw3kJHnOsc/S8eA3T23j5I/AAAAAAAAAac/yOw-gfkPfV4/email-rss-bg.png) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}
.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(http://lh3.ggpht.com/_xn2gmPb9TfM/SmjqRgmI4_I/AAAAAAAAEqU/6Ia5qlTjbXc/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(http://lh3.ggpht.com/_xn2gmPb9TfM/S-QDqBEuouI/AAAAAAAAGRE/8krYWAfHeW8/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>
<h2>Get Updates!</h2>
<p class='first'>Subscribe to Free Ads And SEO by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeClassifiedsAndSEOSites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='FreeClassifiedsAndSEOSites'/><input name='loc' type='hidden' value='en_US'/></form>
<p>Be informed of new posts by <a href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=FreeClassifiedsAndSEOSites&loc=en_U'>Email</a> <span class='right'><a href='http://feeds.feedburner.com/FreeClassifiedsAndSEOSites'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/FreeClassifiedsAndSEOSites?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>
*Replace FreeclassifiedsAndSeoSites with your feedburner title.
*Replace Free Ads And SEO by your site title.
4.Save your changes.
Tags:subscribe via rss and email,blogger widgets,sidebar subscription widgets,subscription and social bookmarking widgets below every post
Category : BLOGGGER WIDGETS
nice widget
even i have designed a new subscribe by email widget
http://www.designrapid.com/subscribe-by-email-wordpress-blogger/
Thank you very much for this useful post . It helped a lot for me. And the best example of its excellence is this website SP Library
nice widgets.. i use it on Blogger Widgets
Good One...
awesome ! thanks
Nice Widget Bro, May I Use It On My Blog http://ymandge.blogspot.in/
Hi that's a nice post. I want a widget that looks like the first picture, with the RSS, arrow an Mail. Could you arrange for the coes of that widget. Also I would want it in a smaller size. COuld you also mention is the post whow the change the size? It will be really helpful. Thank you.
@hope and sugar,
presently we are busy in collecting new classified sites and your request will be updated soon.