Subscription and social sharing widget below Posts: V1

Here is an amazing Social sharing widget that will help you to promote your blog in the social media and increase your site traffic. This widget will appear at the end of every post in post pages only. Along with the subscription option it has sharing options too. Initially created by mybloggertricks, this widget has many important features in its design.  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.  That glow had been removed so that the default values of a browser do not get mixed up with widget.
Great care has been taken in its appearance. Like the subscribe button has been made to look similar in both Firefox and Chrome browser which have issues with padding.

Key Features

• Subscription box for increasing your subscribers.
• Email Subscription form
• Links to Social profile like Facebook, Twitter, Google Plus, Pinterest, including RSS feed link
• Follow us buttons for your readers to get connected on your other networks.
• Social sharing buttons with counter
• Facebook like box which will increase your fans
• Light Design to suit all sorts of blogger Template.
• Lightweight code thus doesn't affect Page Load.
• Easy to install!

How to install

Just follow these easy steps:

• Below in widget generator only enter your social profiles/pages usernames not whole URL.
• Once you enter all of your usernames hit the Generate button.
• Now login to your blogger account and backup your template.
• Then goto: Blogger.com -> Template -> Edit HTML -> Proceed.
• Tick Expand Widget Templates.
• 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 code that was generated in the 2nd Step.

Widget Generator

Subscription Widget Generator V1

Settings

Your Facebook Page Username
Google+ Page ID
Twitter Username
Pinterest Username
Feedburner ID

<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 &quot;trebuchet ms&quot;, 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=Tecnohertzz&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='Tecnohertzz'/>
<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='https://www.facebook.com/Tecnohertzz' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png'/></a>
<a href='http://twitter.com/Tecnohertzz' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png'/></a>
<a href='https://plus.google.com/107925603909723241470' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png'/></a>
<a href='http://pinterest.com/tecnohertzz' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/Tecnohertzz' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/s32/rss.png'/></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=''/>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'/>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'/>
<script type='text/javascript'>
(function () {
var li = document.createElement(&#39;script&#39;);
li.type = &#39;text/javascript&#39;;
li.async = true;
li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[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'/>
<script type='text/javascript'>
(function () {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[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%2FTecnohertzz&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>
<span class='author-credit' style='font-family: Arial, Helvetica, sans-serif;'><a href='http://tecnohertzz.blogspot.com' target='_blank'> Blogger Widgets &#187;</a></span>
</b:if>

We hope you have successfully installed this amazing widget on your blog without any problems. If you still need any help or getting any errors in installing this social subscription widget, then don’t hesitate to ask us through comments. Let us know what your views are in the comments for any improvements in its design or codings.