Social sharing plays an important role in a blogs popularity. More subscribers means more traffic and traffic converts into income and high search engine rankings. There are many Widgets available for this purpose but Adding different javascript widgets for different social networks makes blog slow, Here is a Cool Stylish Social Subscribe Widget with Multiple Subscription Options. One widget and you're done, It doesn't make blog slow and loads pretty fast.
This Widget contains following subscribe options, It has a Beautiful bar with social icons like Facebook page, Twitter page, Google plus, Pinterest, RSS.
- Facebook Like Button
- Twitter Follow Button
- Google +1 Button
- Email Subscribe Form
How To Add This Social Subscription Widget In Blogger Blogs?
- Go To Blogger Dashboard>>Layout>>Add Gadget
- Choose the HTML/JavaScript
- And Add the Following below code in 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/nextbloggertricks" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2F168-js74Fnpzm0-6F356Nsd7nmmMmc_QAbC3QGQn7mtO5ufCj-BZOZp_TabFTuaLkwxueQHf_ghK4ZGwoK2SMnVpywyuJCZWU3Ynb4n870uknWTLQZ9Pr1MxLkhZ4BjGy7dpYJEeyk/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2F168-js74Fnpzm0-6F356Nsd7nmmMmc_QAbC3QGQn7mtO5ufCj-BZOZp_TabFTuaLkwxueQHf_ghK4ZGwoK2SMnVpywyuJCZWU3Ynb4n870uknWTLQZ9Pr1MxLkhZ4BjGy7dpYJEeyk/s1600/facebook.png" title='Facebook'/></a> <a style="margin-right: 10px;" href="http://twitter.com/NBTTricks" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eNyH7205Mb_PAuapPBWUr08IoBCqjjD-E18ZPAB7l5g63UuP04qInvBVCjeyzn3ql6U86f4mgKnGFeqx5H7bw3UWBig5jtH4n4z3wqL1wcSajxvkfLWyXg7cs2E61KWSpq9q8S_UVlw/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eNyH7205Mb_PAuapPBWUr08IoBCqjjD-E18ZPAB7l5g63UuP04qInvBVCjeyzn3ql6U86f4mgKnGFeqx5H7bw3UWBig5jtH4n4z3wqL1wcSajxvkfLWyXg7cs2E61KWSpq9q8S_UVlw/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/AVvXsEjMC1Id8r5mnl4d8YcNBIh_MHQLlz3bcX-bUqN9dfEu8dFCBLsy9XYoMLHvDc6eQJhXm0EQglN6s4J7Z8amJTfReg5LbvTQ7mAzU0AmwZ6UVF_8CWUgtuIEuMOWyoCeoqiJGzKeT2CvIMM/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMC1Id8r5mnl4d8YcNBIh_MHQLlz3bcX-bUqN9dfEu8dFCBLsy9XYoMLHvDc6eQJhXm0EQglN6s4J7Z8amJTfReg5LbvTQ7mAzU0AmwZ6UVF_8CWUgtuIEuMOWyoCeoqiJGzKeT2CvIMM/s1600/gplus.png" title='Google Plus'/></a> <a style="margin-right: 10px;" href="http://pinterest.com/prajjwalzone/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXOBgr8GRuDEBEs6G8wcWScDYCUjsCVrfLKnOfKhbsgWjc4Q4-s9fWu1oAzBjjlp6zvTXTtfF-GGhJg0iMu8NhtvPSAVd116dEQ51ryJUaONdl0aDfgieFqiaeyKYj2vT49kWc00-4j8/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXOBgr8GRuDEBEs6G8wcWScDYCUjsCVrfLKnOfKhbsgWjc4Q4-s9fWu1oAzBjjlp6zvTXTtfF-GGhJg0iMu8NhtvPSAVd116dEQ51ryJUaONdl0aDfgieFqiaeyKYj2vT49kWc00-4j8/s1600/pinterest.png" title='Pinterest'/></a> <a style="margin-right: 10px;" href="http://feeds.feedburner.com/Nextbloggertricks" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-P6Oe2pXQIFgXj_wze8vK6hWj_Eq1JztgRfnSmzJd122nigiWXtQwhohiijJg4RHG2Pm3Rpd8ly_cQtlLgTpPvvaCwtdh9WRxYc6LrjxqRBE7c_wuvFfhdQgr8CTPTLsgtaur0Robos/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="
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-P6Oe2pXQIFgXj_wze8vK6hWj_Eq1JztgRfnSmzJd122nigiWXtQwhohiijJg4RHG2Pm3Rpd8ly_cQtlLgTpPvvaCwtdh9WRxYc6LrjxqRBE7c_wuvFfhdQgr8CTPTLsgtaur0Robos/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.nextbloggertricks.com/"></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%2F
<!-- 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%2Fnextbloggertricks&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&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&id=twitter-widget-0&lang=en&screen_name=
</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&id=twitter-widget-0&lang=en&screen_name=NBTTricks&show_count=true&show_screen_name=true&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= </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=nextbloggertricks, '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=" <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="Nextbloggertricks"/>
<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;"><a href="http://www.nextbloggertricks.com/2014/10/beautiful-social-subscription-widget.html" target="_blank">Get this</a></span>
</div>
<!-- End Widget -->
</div> <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;"><a href="http://www.nextbloggertricks.com/2012/10/how-to-add-multi-social-subscription.html" target="_blank">Get this</a></span> </div> <!-- End Widget --> </div>
- Don't Forget to Replace the following highlighted code with yours.
- Then Click On Save Button.
- That's all!
So friends this is our today's tutorial if you're have any question or getting error during the integrating or facing any type of problems so please leave your comments for solutions and don't forget to like our Facebook page and also share this article with your friends on social networking sites.
Happy Blogging!
Monday, October 20, 2014
