Stay Connected Widget With All Subscription Option

Social media has changed the world of SEO and online marketing. In last couple of years, many social media marketing companies are coming into the market to create brand awareness via Social media promotion. If you are into Blogging, I’m sure you must be aware of advantage of having a Blog subscription box and some time it’s hard to select from hundred ofsubscription options available. Last time i have shared Stay Connected Widget for Blogger. Today I'm going to share Another awesome & Unique Social Subscription and email subscription Box for our honorable readers . Its really looks awesome & give a unique look to your blog. So add this beautiful email subscription box to your blog & attract new visitors to make them your blog's subscriber. You can see live demo on our blog sidebar. We are also working on this widget make it more attractive and easy to edit. So Now Stop the Description and let's start the tutorial.

How To Add It To Blogger Blog

1. Login to your blogger Dashboard
2. Go to Layout and click a Add A Gadget. 
3. Select HTML/JavaScript gadget.
4. . In title Field Write anything you want. like Stay Connected, Subscribe Us, Subscribe Now. 
5. Copy the following code and paste it inside the content box. 

<style> 
.mbt-subscribe-box-email-field { 
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiedF75GvTPTkR6l1Jqa3AcSrXtkTEfPclbDICWarFWnOQQuM9nkM1huAPKwhgk_XM4Vvf96UscuTJQ9p5GqWHaGW4bUCoy7o1WevvMIG71Dl_SE-CC9IlL-kWsKxG-dFsZiJ7nT4slP-AZ/s1600/sprites.png) no-repeat 0 -28px; 
    width: 280px; 
    float: left; 
    color: #777; 
    margin: 0 0 10px 0; 
    padding: 10px 30px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
        
}
.mbt-subscribe-box-email-button { 
    background: #09f; 
    width: 280px; 
    float: left; 
    color: #fff; 
    font-family: 'Verdana, Arial; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 10px; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    text-transform: small-caps; 
   
}
.mbt-subscribe-box-email-button:hover { 
    background: #303030; 
} 
</style>
<!-- Social Profile Icons Start--> 
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'> 
<a href='http://feeds.feedburner.com/bl0ggertricks' imageanchor='1' target='_blank' title='Grab Our Rss Feed'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsgcDEOdzqTOoVqwS6Ny9Jzakye8T69Ur93-efKjKsf109mRaExJeW89Fsjm8IwKOzzUiW6WkM3RXBfLztfsThccF1AQ2DlwORjVzIQeZRBVOMjeHVt9IyTbN1tKg2k4v7UgVYMnPVeKE/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&loc=en_US' imageanchor='1' rel='nofollow' target='_blank' title='Get Free Updates Via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWzJJbpmcxmkQNWenXtSJvLQQ7QI2WmG9_v0fGV3mwp42pEMlYzQQnPaSqqIk6V-4fLHBJ-cnSbmc0UbDKIlQZnPUJK6m66hueYBIFgt9O8SNXQiETDxsccj9g2mIac4Ax-7wCxNxkzA9/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/mybloggertiks' imageanchor='1' rel='nofollow' target='_blank' title='Like Our Facebook Page'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6DDIKQmnjcJ8dyPuoch2MtaTKQFerPjN5BHJeYX1zpPIrQsq-_yDsUvUMVCjLM-p0zICl1IDCYbwjB9YqvWn3W3U6Sbo-EeakqSXx5xUTM1Z45xTd0MSgYF9nx1PePL-KdpTIfCMXqQI/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/mybloggerstricks' imageanchor='1' rel='nofollow' target='_blank' title='Follow Our Updates On Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglv8Eg7BTxmwrVBPssC_oxQtrQHBuECgMmjY3R7zrvqINElV-CkQkkXT4Xpt0acCN09dEChXKfPbUKQtUQF0VdY5vh-sP6_lr4T-Wwf7TbDU_IxJV2NCW0TQxnCTZF08mS2xkEwCYjOtUT/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/108204301284356444972' rel='nofollow' target='_blank'><img alt='Follow Me on Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/mybloggertrickx/' rel='nofollow' target='_blank'><img alt='Follow Me on Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/> 
</a>
<!-- Feedburner Chicklet Start--> 
<center> 
<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&amp;fg=444444&amp;anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center> 
</div> 
<!-- Social Profile Icons End-->
<!-- Feedburner Chicklet Start-->
<!-- Twitter Follow Button Start--> 
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;"> 
<a href="https://twitter.com/mybloggertriks" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MyBloggerTricks</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</div> 
<!-- Twitter Follow Button End-->
<!-- Facebook Like Button Start--> 
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'> 
<div class='fb-like' data-href='https://www.facebook.com/mybloggerstricks' data-send='true' data-show-faces='false' data-width='280'/> 
</div> 
<!-- Facebook Like Button End-->
<!-- Google plus Badge Start--> 
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'> 
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/108204301284356444972" data-layout="landscape" data-rel="author"></div> 
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'> 
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/103598710564060829080" data-layout="landscape" data-rel="publisher"></div> 
</div> 
<!-- Google plus Badge end-->
<!-- Email Subscription Start--> 
<center> 
<div class="mbt-subscribe-box-form"> 
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks" class="mbt-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Bl0ggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="mbt-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') 
{this.value = '';}" value="Enter your email address"/><input class="mbt-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div> 
</center></div> 
<!-- Email Subscription End-->

Customization

Some customization are required for making this widget work perfectly for you. Follow the Steps:

• Replace the all highlighted text in yellow color (Bl0ggertricks) with your RSS User Name.
• Replace the all highlighted text in Red Color (mybloggerstricks) with your Facebook page User Name or user id.
• Replace the all highlighted text in Blue Color (mybloggertriks) with your twitter username.
• Replace the highlighted text in Brown Color (108204301284356444972) with your Google Plus Profile Id.
• Replace the all highlighted text in Orange Color (103598710564060829080) with your Google Plus Page Id.

All Done: After customizing the Gadget according to your desire needs, just Save the Gadget. Now go and check your site, we are sure it would not let you down. 

Optional Steps.

If in case the facebook like button did not work then add this Javascript SDK code just below <body>

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>

If in case the Google Plus Page badge and Google Profile badget did not work then add this Javascript code just below <body>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves. Peace and blessings pals!..