'No Ordinary' Social Sharing & Subscription Widget

This Social subscription widget is made with the aim of promoting and increasing traffic of your blog in various manners. It has the potential to boost your subscribers, Facebook fans and the widget can even make you viral on various social networks. Your readers will also get an opportunity to connect with you on your other networks and all these features are just in one widget in a compact and presentable manner. This widget has almost everything you will need to promote your blog and increase fans and readers. It has a subscribe box, share box, Facebook like box; what else you want? It can replace any other social buttons, widgets or plugins you are using on your blog.  Get ready to see the amazing beauty in action which will nurture your blog. 

Live Demo

Features:

1. Subscription box for increasing your subscribers.
2. Follow us buttons for your readers to get connected on your other networks.
3. Social sharing buttons
4. Facebook like box which will increase your fans

The main features are quite noticeable at first look but there are some minor features which you won’t be able to notice. One of them is the golden or blue glow. If you are using Chrome, you would see a golden glow while using any text box or login form. Similarly, in new versions of Firefox you see a blue glow by default. We have removed that glow so that the default values of a browser do not get mixed up with widget.

We have also made the subscribe button to look similar in both Firefox and Chrome browser which have issues with padding. If we didn’t do that, the button will look different in Chrome, somewhat misplaced. Some CSS3 transition effects have been used to give smooth feeling on hover in combination with box-shadow.

And guess what, all these many features in a single widget have been presented in a neat and compact manner with a size of just around 10KB.

How to Use?

I know, I know, you are pretty much excited to use this widget after reading those features. Your wait is over. Just follow the coming steps to increase the beauty of your blog.

1. Go To Blogger.com -> Template -> Edit HTML -> Proceed
2. Backup your template
3. Tick Expand Widget Templates
4. Search for:

<data:post.body/>

This code may have 2-3 occurrences in your template but you need to just concentrate on the first occurrence. Just below it paste the following code.

<!--No Ordinary Social Subscription Widget-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-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;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
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;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-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;
}
.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;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-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;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-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;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc' />
<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='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxs39GdzYXUWaEU2xfro3tH73hujDfRtex09oXd4PSOUR8wcgynOWlA9rKUdktZoE1kYzT7kI77IlsLkSQsFqn6j8Y0Ziq6SRxxLsd1O-BUM30yn6EvuGLqlPGaFI-qq8myL9Zd_47ACk/s32/facebook500.png' alt='facebook'/></a>
<a href='TWITTER URL' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQHJe8RnJDB_Sk6D5v6ECZFA8e03FAKJjU58_8LKXBy0K9z1xN8RL08wrA7br0hjDA08MogAET5spNHdreWOPmx9YoK0I7tF2MzKsskPyI7ApwGnQdQf9Oj7qq-5FMTtGfOKkNp3FJKw/s32/twitter.png' alt='twitter'/></a>
<a href='GOOGLE+ URL' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcti1ykyqsuweMJ0T_l-VLQf_5Plr0aHHIZ1vT53wpaBSBpMSpwojs2LQevn1vQBwlB3a-jcdb_JN9FxpoCDgVBdnUw3mxfiX3qIA4EIoKQ6kX8e9hWB-eqEz8NZBuXOhtrZHzC7cRmIY/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitczEUvYxOprsSZUZm6vv7r8eAzMSEjwX8s2Ah41TlAELQ_isjrixk800u7hE941yGkMyV_mw52JtzAge_Gin9J9Fjbq4qCLI9qkpMnY9SdrX_Vc21WYOY4ugrbkyikeTxRlz7BbrT96I/s32/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeV8YRL5hLcu0eIEZiR1lVgqCQUqBXZ0usqIh1C87_HfO3xFsj7p_1tomS122bTkom6WlO9UjFrd2a49SYf3X4kY9ouO1uZb8pQmbj_ldw_k6WEkpEuF_eG6pVzRLRR_Zk4HsVLOoHUU/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<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 style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--No Ordinary Social Subscription Widget-->

Changes to be made:

1. Replace tntbystc with your feedburner FEED TITLE. You get these values by going to your Feedburner account -> Publicize -> Email Subscriptions
2. Replace 'FACEBOOK URL' with your Facebook fan page link
3. Replace 'TWITTER URL' with your Twitter link
4. Replace 'GOOGLE+ URL' with your Google+ page
5. Replace 'PINTEREST URL' with Pinterest link
6. Replace 'RSS URL' with RSS feed link
7. Now for Facebook like box, follow these steps:
   1. Grab your Facebook fan page URL (Do not include http://)
   2. Replace all the back slashes ( / ) with %2F
   3. Now replace www.facebook.com%2Fbloggertricks with your URL you achieved just now.

Got Questions?

We hope you have successfully installed this amazing widget on your blog without any problems. If you still need any help or have some questions or getting any errors in installing this social subscription widget, then don’t hesitate to ask us. We would love to hear your suggestions for improving this widget with more features. Let us know what your views are in the comments. Cheers :)

Want more of such plugins?  Just search MBT for "Social Sharing widgets" or " Subscription box"

---

Guest post by Bhavesh Pamecha from  TopBloggingIdeas.com, a Gold star MBT contributor and a tech savvy Blogger.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 8/28/2012