How to Add Stylish Social Subscribe Widget for Blogger

Hey Guys, checkout this Awesome Social Subscribe widget for Blogger . This widget contains multiple subscribe options including some social buttons and Email subscribe form.

If you want to add this widget to your blog, Just follow this simple steps

 1.Log in to your Blogger Account
 2.Go to Layout > Click on 'Add a Gadget'
 3.Choose HTML/Javascript
 4. Copy the following code and paste it inside  
     HTML/Javascript widget.






<style>
    #socialwidget {
    border: 1px solid #ebebeb;
    width: 300px;
    }
    .TZ-social{
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #ebebeb;
    }
    .TZ-social img:hover{opacity:0.8}
    .googleplus {
    background: #ffffff;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    ine-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: 9px 70px;
    width: 310px;
    }
    .g-plusone {
    float: left;
    }
    .twitter {
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
    padding: 10px;
    }
    .TZ {
    background: #ffffff;
    border-top: 1px solid white;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .TZ span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 310px;
    }
    #widgetbox .author-credit a {
    font-size: 10px;
    font-size: 10px;letter-spacing: 1px;
    color: #1E598E;
    text-decoration: none;
    }
    .email-subscribe-emailbox {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 42px;
    background: #EFF8FB;
    width: 280px;
    }
    .email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
    .email-subscribe-emailbox input.emailu:focus {color: #333;}
    .email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
    .email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
    .TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id="socialwidget">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 10px;" href="http://facebook.com/zgamerxs" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJEwUV_24Af6DHqVvLeMKWOVHlwvJdAhrcXw9gmhUcXoGAbLsZy1tevp53ijrK7I0yAA1OiaOubNeaySLBbnWOmF6gCOA9y-cs1qe_CSNHmVJF_xi5zdNQ5VOn3Mkw4zMkeKDX99WQVo/s1600/facebook.png" title='Facebook'/></a>
    <a style="margin-right: 10px;" href="http://twitter.com/vishalassassin" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtIqn_WaA-pFeiK_a15rpXAxCPhJjQ4PKHuf7PaYRVn1NTxxXKSomMfh9VHhGPWjhsFAPPdfId-MDlz8VclygCnPmmT0SwUhzE1xNuXBT4QpUFcFCV5o8-jRn1GFnC_jBfGs9EIJnHSs/s1600/twitter.png" title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="https://plus.google.com/117521503834739609237" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh01-Uur5BxWY4ipxMHSrRboUawJdJ1oVquyvSNn2EcT52Aot8XlGrUAa6nsfEu6HY8K01azKL9GXtLAQVzzQ_tI7IhtbJY5LeSR7vKIHrIMgvYF2psYOmki4rYacJh_k4j6FnswkYym50/s1600/gplus.png" title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="http://pinterest.com/vishalassassin/" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDgLTL6b5Ns6Cop52nFxlO59hld1DA97ZTEqLBHQHeawrEckD7XG_5Rf_NQDf7BMPdvzBixzE0j03YwElSJr2LlTAAuKurR5dOtODDVW74mmF0v0A9XuYM6GH29nLw-XyfUlGIt1tDRk/s1600/pinterest.png" title='Pinterest'/></a>
    <a style="margin-right: 10px;" href="http://feeds.feedburner.com/zgamerx" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRO-BUebWtEBRZbqK4qUVUt5lwMyJEF-7WDScG4ZC7Z1rrYFjmlRIbOBtaMqqO7tcO18bbAnQyIeOJKcTlypUEHbxxP-V3RFn5cJgYx344b18rNMnbO_QBjqTBxm1KIjQyK7yQRMBGKW4/s1600/rss.png" title='RSS Feed'/></a>
    </center>
    </div>
    <div class="googleplus">
    <span><font><font>Recommend Us On Google </font></font></span>
    <!-- GooglePlus -->
    <!-- Place this tag where you want the 1 button to render -->
    <g:plusone size="medium" href="http://www.zgamerx.blogspot.in"></g:plusone>
    <!-- Place this render call where appropriate -->
    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div>
    <div class="TZ">
    <!-- facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fzgamerxs&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
    </iframe>
    <span>Like Us On Facebook</span>
    </div>
    <div class="twitter">
    <!-- Twitter -->
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=vishalassassin&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
    <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zgamerx', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="zgamerx"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    <div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
    <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span>
    </div>
    <!-- End Widget -->
    </div>



5.Click on save.
 

Customizations 

Replace zgamerx with your FeedBurner Username.

Replace zgamerxs with your Facebook Username.

Replace vishalassassin with your Twitter Username.

Replace 117521503834739609237 with your Google+ ID

Replace vishalassassin with your Pinterest Username.

Replace http://www.zgamerx.blogspot.in with your Blog Address.

That's All

Have any problems, please comment.