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)
<style>
.subscribebtrix {
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;
width: 310px;
}
.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;
}
</style>
<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 />
<center>
<div style='margin: -30px 0 20px 0;'>
<a href='http://www.facebook.com/bloggertrix' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAtoXP64fhIf7yAIvW0GBEdBFrS2c8RyYjNgwKwijIeghUexkpTeSW7qgmfKV34YRgJueGw8xjwkLz9cnsuTiJs5ugid919WyAyAAgSJED4J686DyEjbrhxY1BY5F_SN7QfWJZLXFsqix/s1600/facebookicon.png' /></a>
<a href='http://www.twitter.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJwo2DAl6piXQ1xxzLbEnOkYCWpgjxdlV6-PFQAUacQQjEsV2ox104KRnPCvP37h_pm5J_8niU_RtbDZEpAWs-VQnaQ3QqHSc4Y2wI5aHzavd6HHGVZMEDO84vA7EZdSBVZ14_oXb2w7x/s1600/twitter.png' /></a>
<a href='https://plus.google.com/UserId' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOl9JD43ISFhbw8r_ebNRx0wl6FOW7EnhX-J9_SnyK6pkGkJy_YE8WwLsFONfrah6GAoyG0rN2zWZmnpiLV0sbUZpkBD6w-_oA0uWeaMKtNCVUdhFcigt6DOL7Xac5-MZ4rIdsY3J33EV/s1600/google-plus-icon.png' /></a>
<a href='http://www.pinterest.com/bloggertrix' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzFrAyu_FJrEifd9zDHBwKrKExCvyaGcV-HstRw4WSTyqL-U8mXfiSCM0C4tHESAF50hM2YmJZytQ3zZ3NJcNo-TkWGAeHIObLa1P2tUwE7VEY8QeRUvFQfazC07odoHS2FKZGSsz3d8C/s1600/pinteresticon.png' /></a>
<a href='http://feeds2.feedburner.com/bloggertrix' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlL9mvRZ12NiQIL5hZhbkWWcrvouQzqqSFTmBW5A3r_WxWsOBuz5KXhdfLSjdUG9gSeLF59BUA-xT3D0EbLdM0f_SxvsAuHcYamRu2ooTXmMvElbXf8S7RFytH42oGSBng9s4g9jZE-Yw8/s1600/rssicon.png' /></a>
</div>
</center>
<div align='center'>
<a href='http://feeds.feedburner.com/bloggertrix'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=123D60&fg=ffffff&anim=1' style='border: 0;' width='88' /></a></div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix", "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 == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...' />
<input alt='' class='button' title='' type='submit' value='Subscribe' />
</form>
</div>
</div>
4. Click on save and view your blog..
If you wish to increase or decrease the width. Change the width in line 3, line 11 and also line 36 Also.
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.
