Standard And Stylish Subscribe Box With Social Sharing Option

An another standard and stylish subscribe box with cute social sharing icons that attract your visitors and force them to subscribe to your daily post. It also has google plus,twitter and facebook sharing buttons which helps the visitors to like and share your posts and also helps to follow your blog.Very easy to install widget that can be added anywhere in the blog with add a gadget option. It looks fine when the gadget width  is 300 pixels or more. Just follow these simple steps to add this subscribe box to your blog.

1, Go To Blogger - Design

2, In Page Elements choose Add a gadget

3, Choose HTML/JAVASCRIPT option

And add the following code,

<left><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVi7GyKPH70Jqjkla-BS8g0UcYpblt-_Rr5y7MdDrQYx8pPQQjdqM7HGEJopH32AKnjpCAjByda7Adx2i0pwixjdhM8dpwlKv_e_60-VJgzP3uxEUtpMWeLXq4VE1ys94kPs4uFqKjhc7j/s1600/SUBSCRIBE.gif"/></left>

<style>

    .code{width: 300px; float: left;}

.code .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}

    .code .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}

    .code .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
    .code .subicons a{text-decoration: none; color:#333333;}
    .code .subicons a:hover{text-decoration: underline; color:#333333;}

    .code .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_4Y7TZ5_DEEWxgZiK8WsuDvQZ-rsK-PJrqeCAaugo7AfeoV-327vvi5c02nfqkGysHWDNwH3seJHAaFsiSh6k5rl5IS6jxIZ-fN38pdypAboQA4FEY5UKb_f1ZmXhNnp-DHPRMr9lynb/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}


    .code .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_4Y7TZ5_DEEWxgZiK8WsuDvQZ-rsK-PJrqeCAaugo7AfeoV-327vvi5c02nfqkGysHWDNwH3seJHAaFsiSh6k5rl5IS6jxIZ-fN38pdypAboQA4FEY5UKb_f1ZmXhNnp-DHPRMr9lynb/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .code .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_4Y7TZ5_DEEWxgZiK8WsuDvQZ-rsK-PJrqeCAaugo7AfeoV-327vvi5c02nfqkGysHWDNwH3seJHAaFsiSh6k5rl5IS6jxIZ-fN38pdypAboQA4FEY5UKb_f1ZmXhNnp-DHPRMr9lynb/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .code .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_4Y7TZ5_DEEWxgZiK8WsuDvQZ-rsK-PJrqeCAaugo7AfeoV-327vvi5c02nfqkGysHWDNwH3seJHAaFsiSh6k5rl5IS6jxIZ-fN38pdypAboQA4FEY5UKb_f1ZmXhNnp-DHPRMr9lynb/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .code .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

    .code .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gKwnh_48MEHdIaMKqj8PlAvTKgSeS3eM-2VJDS6H7CmRn3w2Pmljb28RMnsZoR5k2rsN_DvXeVQ68cja0bTtY-R0uRaLEB4aJwfsZNWOztiEMe45bGx83vDA5SV60000RPEaQLuI6Wk/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }

    .code .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

    .code .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    .code .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}



    </style>

    <!--[if IE 9]>
    <style>
    .code .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

   .code .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
    </style>
    <![endif]-->

    <div class="code"><div class="count"><span class="bigcount"><a rel="nofollow"  href="http://feeds.feedburner.com/ TechInside007 "><img src="http://feeds.feedburner.com/~fc/ TechInside007 ?bg=CCCCFF&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></span>
Receive Our Daily Updates </div>
<div class="subicons">
<div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/ TechInside007 " target="_blank">  RSS</a></div>

<div class="googleicon">&#160;<a href="https://plus.google.com/117765293956504917182"
  rel="author" target="_blank"> G+</a></div>

<div class="fbicon"> &#160;<a href="https://www.facebook.com/forblog809" target="_blank" rel="nofollow">FB</a></div>

<div class="twittericon">&#160;<a href="http://twitter.com/TechInside" target="_blank" rel="nofollow">Twitter</a></div></div>

    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive New Updates Straight in your &#160;&#160; Inbox by submitting your Email ID below.</p></div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= TechInside007 ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value=" TechInside007 " name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>


*Replace TechInside with your own twitter username.

*Replace forblog809 with your facebook username.

*Replace TechInside007 with your feedburner title.

*Replace 117765293956504917182 with your Google Plus profile id.


Save your changes and check your blog for beautiful Subscribe Box.