Add a MyBloggerTricks style social subscription widget to your blogger blog

MyBloggerTricks is one of the most popular websites in the world. It provides different types of tips on blogging , SEO , blogger widgets and many others. It's social subscription widget on the upper part of the site is also pretty cool. It contains the links of RSS Feed , Facebook , Twitter and Google+. It also shows the no. of twitter followers and there is also a form for e-mail subscription. So, today I decide to share on how you can use the widget on your blog.

First copy and paste the code in wordpad.

<style>

.BTCbar{width: 300px; float: left;}
.BTCbar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}
.BTCbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
.BTCbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
.BTCbar .subicons a{text-decoration: none; color:#333333;}
.BTCbar .subicons a:hover{text-decoration: underline; color:#333333;}
.BTCbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.BTCbar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.BTCbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.BTCbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkF9LWmuM4P4Sxt5vV_Ecxb0VPkQyqETMk08_QuA6UyAOvkJLSHK61NLmHC5AyGPtcdkOUw3supaNU7HgEhyRhfJId7yIeCgScMt3seBYM_FX1qEPwAR2ZZ6BD5cDY5a4bew0WqQ-eBP8/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.BTCbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.BTCbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfP3_cK-6hLMrwEvlxDItnxHD_-PbupF7rHqA9vSj3hseHzX33FRTamoF5bLC_CRT0hWKRuXDglCphTo82Dgw2DOoGqUW_7En-MOXTnYY_ZnvjcoxCNfEl3fws2Mf2yDGzbsxQvsh3wc/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.BTCbar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}
.BTCbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 205px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.BTCbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

</style>

    <!--[if IE 9]>
    <style>
    .BTCbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

   .BTCbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
    </style>
    <![endif]-->

<div class="BTCbar">
<div class="count">
<span class="bigcount">
<a rel="nofollow"  href="http://feeds.feedburner.com/blogtipscodes"><img 
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/blogtipscodes?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26"/></a></span>
Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/blogtipscodes" target="_blank">RSS</a></div>
<div class="googleicon">&#160;<a href="https://plus.google.com/116408116032173037344" rel="author" target="_blank"> G+</a></div>
<div class="fbicon"> &#160;<a href="https://www.facebook.com/techcodes" target="_blank" rel="nofollow">FB</a></div>
<div class="twittericon">&#160;<a href="http://twitter.com/lahaulseth" target="_blank" rel="nofollow">Twitter</a></div>
</div>
<br  style="clear:both;"/>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/lahaulseth' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>

    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family:  Arial;  padding:0; margin:0;">Receive Quality Tutorials Straight in your Inbox &#160; by submitting your Email ID below.</p></div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtipscodes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />
<input value="blogtipscodes" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>
</div>
<div class='clear'></div>

Then find the following words and replace them with your own usernames.

blogtipscodes --> Replace with your own feedburner username

techcodes --> Replace with your own facebook page username

lahaulseth --> Replace with your own twitter username

116408116032173037344 --> Replace with your own Google+ ID

After replacing all of these words then copy and paste the code in one of the sidebars of your blog. Then view your blog to see the effect. Click here for a demo.