Add a Beautiful Social Subscribe Widget to Blogger

A Blog is lonely without subscribers and visitors, 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.

Articles You'll Like

• How to Add Mashable Style Social Subscribe Widget for Blogger.
• How to Get High Number of Subscribers on your Blog.

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

Click on this button to see working demo of the widget.

How to Add it to Your Blog

Here are the steps to Add the Widget to your Blogger Blog.

Step 1: From your Blog Dashboard, Go to Layout.

Step 2: Click on 'Add a Gadget'

Step 3: Scroll down and choose HTML/Javascript Widget.

Step 4: Copy and Paste the following code inside the window.

<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/thearea51blog" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUxWh-glGoqDNPBWZNFuTsR9hDdS6n8uKSE2kTU93mpng_OQBnJzR3H9Qqq3wJBrkM7s3bhyQP-o9z_tk-eLu7WNjYxrib8iYCiLbNDG8cvSHcQMi1u1ShEcKbPIVd-UWj5sg9jIBNg/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/jimmieluthra" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7hnGeD_8wPVBHiazeqicJ_jUMeDAYIakLzgF1d3rTGQgbl3-W-W8QXAdBGNFxh6aLlX_6KGmNkS5LJuPJdPs9TZJiTHukKScE0m8FWiKz0GcDIShKuPZRbY3V_wel6O2xZYyiZ2EGg/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/AVvXsEjkzDeQr9vSHiVqdnLt8H82TKffsw_vXQWcnwpx0FRZajSO8ZA7pkEwZbTh3jm1ItKFfdC0hqzHfZcu4ZN1iUFsTNZDnWH75_c2DwUEVYyTVg0XowpOq-cuoCK2d1JFkHm7LFyGbc6q3Q/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/jimluthra/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqo-tBIHYS4Q34WPQP8V9wqQDx_1VSKpg7Mmkm5MbpHcTVC9vgWxSS-upnCbJc7amGnEAUZNbbzv02ZOgOhXMlvObaiQgpGI-CDeGvwUefOyZKQBBPacKyyjmzGM1EbOhOHuKpMcz2dw/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/The-Area51" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZxI60xCYk03-jXQJo5ZGeOuqpElXeccoOOXU5bPskKUQfQY-W-2Gy7wh2cMlHKgdV1NcY8giWqt6Ge9YQx_sA_iSeQ8uHxLbSSeia2Xe7wDuuZDwZvFGPpCf2BMSehmG3BetVXBRgQ/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.the-area51.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%2Fthearea51blog&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=jimmieluthra&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=The-Area51', '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="The-Area51"/>
<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.the-area51.com/2012/10/how-to-add-multi-social-subscription.html" target="_blank">Get this</a></span>
</div>
<!-- End Widget -->
</div>

Step 5: After Adding the code inside the window, Make the following Changes.

         -  Facebook Username

         -  Google+ Username 

         -  Twitter Username  

         -  Pinterest URL 

         -  Feedburner Username  

         -  Blog URL            


Step 6: Now click Save.

Hope you guys liked this tutorial, Please share this post and leave your comments below.