- Go to blogger >> Layout
- Add a Gadget >> Add an HTML/JavaScript Widget
- Now just copy all below code and paste it inside HTML/JavaScript Widget
<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/AVvXsEjF4WhKC7zJC5lz6zso2IrikerYtVczKCdrl6dc-zV8C1YGHpJrorNfsKE2m9yBVqcuRSJzgsRpw5kPZXy_2qSpih-D0NIJHbKM5YYmaXxhSs29gl9tc0S6cj4fWgNdvvsTzuNYdB6-gAc/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/AVvXsEjgn2Y5h3wFerIt88i5EFUEcAauKviQEo8IuqKCwc3I8qvzvaBNfJ0-VSieSnX5uVxlbT8u3dP84RnRMX3PB0Jbayd6HY-2OgIe0hSiCilddrkghsv8xZ38B97Y42xUToD8plJx5QZwSTI/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” target=”blank” href=”https://www.facebook.com/BestBloggersCafe“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWbjIUbhAuovRGhfJT_KFBQzP13CNfsJAwY4qZ7G_WWbo-gUUl2fpOgCY4csWpUpHt7Ckq9ja8zv473D58pnfw2jzA0ocsI0m9zOdYpKLjaqTdsAudMMvutFXDOEcklI2vnRZUFiA1tkh/s1600/Bloggertrix-facebook.png” /></a>
<a class=”social-icons” target=”blank” href=”https://twitter.com/onlineustaad“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ5VjYpjoJIAfa-0geXrMxc07YeL9yQD0KWXmM9mGHk3c1vX4eJPBjJcgvWpnp8u1DUPWf9rkzZvjSDIdEgeCwjXAR_vhs_3_uAjZyhjNC4nCP3j7v2BkbNENzSHHqflLWFV6_d0BjyVCk/s1600/bloggertrix-twitter.png” /></a>
<a class=”social-icons” target=”blank” href=”https://plus.google.com/u/0/108628318516871549001“><img src=”http://3.bp.blogspot.com/–KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png” /></a>
<a target=”blank” class=”social-icons” href=”http://www.feedburner.com/BestBloggerCafe“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFn5gTPinUyDS2oEZyTkwuLHJbGJT41FD_-t5cR0ruXvYd_YRdP5nHzIYB34sFPihxecDX2XJtnvX3eo16AtVi60mkWgvrDeZk329E4CnvjriIJLAag224nfmrE_L0rw3RlAnkrzBPuzqZ/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=BestBloggersCafe” class=”sidebar-subscribe-box-form” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”><input name=”uri” type=”hidden” value=”BestBloggersCafe” />
<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>
Just save your widget and view your blog, keep the widget in the sidebar, because this widget is used in sidebar. View your blog to see the new widget.
Customization
Some general customization are required for making this widget work perfectly for you. Just change the links with yours for example:
- Change the Blue color BestBloggerCafe to your Facebook Page name
- Change the Green Color OnlineUstaad to your twitter user name
- Change The Orange color Google+ link to your own
- Change all three Red Color BestBloggerCafe to your Feedburner name
That’s all, save your widget and enjoy the great widget on your blog.