Menu Close Menu

New Stay Connected subscription box for blogger blog

Social Subscription Box Have you ever thought of combining all Social Subscription Buttons into one Cute little Widget? The main idea behind adding all the Social Buttons into one widget is to give multiple options to the users so, they can subscribe to your site with their personal favorite social platform. The Idea of joining Social Buttons into one gadget is not different because there are lots of Subscriptions widgets that work in the same fashion. However, they are not flexible enough to support all foremost Social Platforms. For that reason, we have designed a brilliant Social Subscription widget. It has all the key Social Platforms that are essential for a website. Today, in this article, we will Learn How to Add Advance Social Subscription Widget in Blogger. This social subscription will enable users to like/follow your visitors on the social networks such as Facebook, Twitter, Google Plus, Pinterest  and subscribe your Email feeds using the built-in feedburner email subscription widget.


Live Demo


Update:- 06-01-2013 Fix Style Issue for IE7..

Add It To Blogger


1. Go to your Blogger Dashboard>> Layout>>

2. Click Add a Gadget>> Choose HTML/JavaScript

3. and paste the following code in HTML Area (Title Area Leave blank)



.subscribebtrix {width: 310px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3));
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
display:inline-block; /* IE is so silly */
border: 0px solid #000000;
border-radius: 5px;
padding: 0px 10px 10px 10px;
.subscribebtrix img {
border: none;

.tbimailbox {
width: 270px;
color: #666;
font: 16px 'Trebuchet Ms', Sans-Serif;
padding: 10px 15px;
border: 1px solid #D3D3D3;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;

.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

.button {
   width: 300px;
   border-top: 1px solid #96d1f8;
   background: #0571e6;
   background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6));
   background: -webkit-linear-gradient(top, #123d60, #0571e6);
   background: -moz-linear-gradient(top, #123d60, #0571e6);
   background: -ms-linear-gradient(top, #123d60, #0571e6);
   background: -o-linear-gradient(top, #123d60, #0571e6);
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
   display:inline-block; /* IE is so silly */
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: "Verdana", sans-serif;
   font-weight: bold;
   text-decoration: none;
   vertical-align: middle;

.button:hover {
   background: #123d60;
   color: #ccc;

.button:active {
   border-top-color: #123d60;
   background: #123d60;


<br />
<div class='subscribebtrix'>
<div align='center' style='color: #333; font: 22px Verdana; font-weight: bold;  margin: 0px 0px 15px 0px; padding: 10px 0 10px;'>
Stay Connected</div>
<br />
<br />
<div style='margin: -30px 0 20px 0;'>
<a href='' target='_blank' title='Join us on Facebook'><img alt='facebook' src='' /></a>
<a href='' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='' /></a>
<a href='' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='' /></a>
<a href='' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='' /></a>
<a href='' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='' /></a>
<div align='center'>
<a href=''><img alt='' height='26' src=';fg=ffffff&amp;anim=1' style='border: 0;' width='88' /></a></div>
<div style='margin: 10px 0 0 6px;'>
<form action='' class='emailform' method='post' onsubmit='"", "popupwindow", "scrollbars=yes,width=550,height=520");return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloggertrix' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...' />
<input alt='' class='button' title='' type='submit' value='Subscribe' />


4. Click on save and view your blog..



  • To adjust the width of  widget in CSS code edit the code highlighted in yellow color i.e width: 310px; and enter the appropriate value (i.e 400px, 500px,).
  • Replace Highlighted in green with the name of the social profile usernames.
  • Replace Highlighted in yellow with your email feed username.


You may also customize the look and feel of this widget, the CSS style rules are given with the code above enclosed in the <style>….</style> tag. But if you don't have proper knowledge of HTML/CSS then I strongly recommend you to stick with the same code and do not try to modify it. If you have any questions then please do not hesitate to let me know. I hope with this new Subscription box, your readers would enjoy and would stay in touch more time on your Profiles. Don’t forget to share and subscribe us.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

  2. This comment has been removed by a blog administrator.


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.