In this post im gonna explain how to add Rss feed subscribe box for blogger with social icons.hope
you will like it. By using this users can subscribe your blog. So, it will help to get the new updates
by emails. Im using CSS and HTML for this widget.You can check it from below demo link.
Log in to blogger account and Click drop down.
<style>
#sidebar-subscribe-box{width:300px;border:1px
solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Zb1ioHnIzvcK0LefsQcVtd_uoMVeziC5qE_iDLnT-DykTvXjebLf_oHNKQPEh3K1LATjbztNnmC1ovnGV5vsEsInm-v_z-hzKdUFB8D4oK7ulAe0BokBOmUgxi2om3CW2jt7PE2n3Os/s1600/background.png)
repeat scroll 0 0
#f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px
10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px
0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0
0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZW4x6AvH1VG_Jq44xSuyV3ua-AKnS5sHV0mPJgRRFJZYXe3tlRk_VIhXyZY7O2NL5JOR4fQKc1HCHM40XxZ0ljtsx48bO7Ch9DjTzu1msJ67k95UfqqTxSh40r1d39tr5PffIeOqJgg/s1600/icons.png)
no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0
15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px
solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0
transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px
1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0
1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0
1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border
iframe,.yt-border object,.yt-border
embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px
rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px
solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid
#aaa;box-shadow:inset 0 4px 6px -3px
#aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0
30px;text-align:center;width:100%}
a.social-icons{margin-right:
5px;height:45px;width:45px;}
a.social-icons:hover {
opacity: .7; filter:alpha(opacity=70);}
</style>
<div
id="sidebar-subscribe-box">
<div
class="sidebar-subscribe-box-wrapper">
<br/>
<a
class="social-icons" href="https://facebook.com/rexhacker"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRckkKKl_DeLLN64fHI4sqkGt8Qm_lyHMzqva4RQP1vcOJ394bEw0aQMsrzPDmegNTp2Jm7dyyGYnFt1vDNP071bL1DIGIRrv1c8PLHnxQ_IJgYFyMoqdZs4Uz91HPETtBgkQCQrXy4yFE/s1600/Bloggertrix-facebook.png"
/></a>
<a
class="social-icons" href="https://twitter.com/rexhacker"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yzCGTObkYMB_7watbwIlxQwLNP6liBiU4hNxGMY-QTihC_H6MPaC5NPw8AhfoM2F5-TRlj8JRVBk58LasFsla5fsu1L7z1t4kqMqJND6prg8lP1z7d2tt4ipPAOmoMQFD_d4dGeRyb2J/s1600/bloggertrix-twitter.png"
/></a>
<a
class="social-icons" href="https://plus.google.com/userId"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOicAguLs9A5N-L1VA10bUJwDX_JGJ7SKvoVLJk83f5mOEog1MAuIOFnVdfAOa2UOYCvpRdKvCdCAZXcayVaq1tzlWp_N3ctMB71esQqpsWBcoYgk49EsRIkxUCF_XTs2SEJxt6vBtDVlX/s1600/Bloggertrix-Googleplus.png"
/></a>
<a
class="social-icons" href="http://www.feedburner.com/rexhacker"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyO_ecYFnJxz8o4-Yx1D0JWdOqC2xMScNbIHwGAgWrtjdnMwIrNTLnLCGW09dDYop-zy7e5kk-OF01v_BE429LhKWKjoJBoDswvvD4PJCRk4RMUm4Jbrpf4Rt0GuZ4fzFowT4Za6okuIw/s1600/Bloggertrix-Rss.png"
/></a>
<p>Subscribe To
Our Email Newsletter & Receive Updates Free</p>
<div
class="sidebar-subscribe-box-form"><form
action="http://feedburner.google.com/fb/a/mailverify?uri=rexhacker"
class="sidebar-subscribe-box-form" method="post"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=rexhacker', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true"
target="popupwindow"><input name="uri"
type="hidden" value="rexhacker"
/>
<input
name="loc" type="hidden" value="en_US"
/><input class="sidebar-subscribe-box-email-field"
name="email" autocomplete="off" placeholder="Enter
your email address here"/>
<input
class="sidebar-subscribe-box-email-button" title=""
type="submit" value="Subscribe Now !" /></form>
</div></div></div>
You are done.
Hope this Blue Color Social Subscription Widget helps to make your blog attractive.