‘No Ordinary’ Social Subscription Widget For Blogger:Digital Tech Inspiration

This Social SubscriptionWidgets is created with the aim of advertising and improving traffic of your blog/website. It has the potential to increase your fans on Facebook, Twitter, Google+, on other social networks and can make you popular

on various internet sites. Your visitors will also get an opportunity to hook up with you on your other networks and all these functions are just in one gadget. This gadget has almost everything you need to advertise your blog/website and improve lovers, readers and visitors.

‘No Ordinary’ Social Subscription Widget for Blogger has almost everything you need for socializing your blog/website. This widget can increase your subscribers and make your post go viral on social networks.

This gadget has a nice feedburner subscription form, famous follow us buttons, top social media buttons and a Facebook like box for boosting your blog/website fans; what else you want? Get ready to see the awesome elegance in action which will develop your blog/website. Lets move to the tutorial.

How to Add ‘No Ordinary’ Social Subscription Widget to Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

<data:post.body/>

STEP #7: You may find this code 2 or 3 times but you just need to concentrate on the first one in your template. Just below that code paste the following code.

<b:if cond='data:blog.pageType == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WIKITECHNOL' />
<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='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='http://www.facebook.com/WIKITECHNOL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw5_yc5P0ezCRjs5J50TWdDvO2H2C7ZWi1XQGnPRz2HIhqZVmNTZxrDq-ajdgRVrajWAef4xowy6PEQImLPjse0dAqZbnkBeMpUN-omOfMhg43GXmMc1FYGeX1lvXKI4EY4tcCi5wtCQM/s32/facebook500.png' alt='facebook'/></a>
<a href='http://www.twitter.com/WIKITECHNOL' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSex7yprAigMCHriwE0yNfSbu53nKUXqlKMZ5MUYVbm6grMcSI5EY_bfyH9YheHUuGZAbatYflN20fQs-p0yt9zX_Q2wW7V7NKi1SguNUc7dYeK16JA3-aVDLzr2PUD7hzR6607BzfvJw/s32/twitter.png' alt='twitter'/></a>
<a href='http://plus.google.com/107244857879006042054' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe19uKblTTyRTTUxFVEZkeZZxY7mN3mn3KpkEJzkaQQITFiAxpCtxamarHErE0SgmtCFQey-llaJ2bN4P4S9MXypotPG4PRUB64QblxJC0139OeuVDNuznjNqnlIQ0osGP3Z_91h_OV0Y/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://www.pinterest.com/wikitechnol' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsABewpstRrWu7oXbIN1JsUADyN8Gon2DiqgJBM3wazGybd0jLd0VdQIcaNMhq2qziyT1qUT0_CVB-J9jlQDsrCPIPoRCTIchX_ZF0i9rseyUX8oPDrrhP_08572j3SX4CDzPG77tDvY/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/WIKITECHNOL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9rLr7XSCsn8GvQXVyp65060YX_wBufwkaGWvQGx9pZLS9JCJ3KPVWDv0TqqIVbEGdHvvdddyudFKvpH3gxiNoVwXDzRGi0C2eqzM-hpEWEgI16n-F4n94PmsJFeQYQXPlesr0WqsLFI/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%2FWIKITECHNOL&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>

Customization:

Replace WIKITECHNOL with your Facebook username.
Replace WIKITECHNOL with your Twitter username.
Replace WIKITECHNOL with your feedburner username.
Replace 107244857879006042054 with your Google+ ID.
Replace wikitechnol with your Pinterest ID.

STEP #8: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.