How to Make Social Widget Subscription Box

Finally can create a widget or widgets Social Subscription Box subscription different post than usual. I say different because the widget subscribe this article complete with a variety of features that can connect you with some of the famous social networking, with the expected share button your article will spread like a virus to a variety of social networks, and is also expected to increase your RSS feed subscribers as well box fan page to increase the fan of your blog.

Features:

•  Form Feedburner to improve customer your article
•  Follow button so that the reader can join you on your social network
•  Button ie,, social media Facebook, Twitter, G + 1, StumbleUpon and share AddThis buttons to other social networks.
• Box Facebook Fan Page to increase your blog fans

These four main features of this article subscribe widget pretty neat and clean that will not confuse the reader. All official social media buttons found on the ShareThis button. To provide subtle nuances used box-shadow CSS3 powered transition. Type of font used is the Google font named Oswald.

Are excited to use this awesome new widget? You do not have to wait anymore. Please follow the steps below:

•  As always log in to your Blogger account -> Templates -> Edit HTML -> Proceed
•  Check the list Expand Widget Templates
•  Find the following code: <data: post.body />

You might find two or three above code, place the following code in the first code above

<!--Social Subscription Box Tipstrikblogging.com-->
<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=TipsTrikBlogging-Amatullah&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='TipsTrikBlogging-Amatullah' />
<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=‘http://www.facebook.com/amatullah.syukur’target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovTB78KHyKF91k_2ON1LqH2Go3o2eCAbWUTPsnd_aWEf8tYkxZ5-vtae7IDfQeoDDdp58_-KwP1OvrXj31DjhhyNK4RodXCI3-4fMvz0HCeiHX88LepOLBdh4ldm6QAGFTq-sGbR0GKE/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/amatullahsyukur' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZGCfCZX4_Yd3i-6O6k_8g2VBQ-Azszz81GfNf2CDnlUMQEPYq6Lp0uWuIU_a41eF0dicPlu0DbgX6Ylm8sxmmrbJ73udfcSElql0oVBNNtx9XU1DAkqybxXedCL2SnDdyG2hOn04hD4/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/116382152511220195182#116382152511220195182/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz12tc4gRKcPDmOSarQbfnBPKH_tgJecCuyBmLZDVz0kGFZBR7MlL80k1OT2Rqj60ep667WxumKJ7YNLI5mqmmLq2ks6zJPW3V04tMZsKf8QWobaPkhIL16UROwugSM6NMdTNP-pwqLkc/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/amatullahsyukur/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjI9bpnfSLNwBKGIOnzBwzXQHhjXdbjkaugp1FPFYRIWXScZP11Kf0HtJpNU3z52inQexFaWWxI0Zx_GtN3hBLD2FDmj0ZyUjofjqIEK2Qx53w9lOM900RG2XLhuZvbusNEQOUtAsNHe0/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/TipsTrikBlogging-Amatullah' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxePF1koxgMj7hBAXlI6TAeM_lfts1KKDuWw2dqXNPBVRhyphenhyphen_a2UhmY2sB3hknzJJJJ-JgIu5a_BcGnaisCnWl_z1mxLt42rLy76kyb02cTTmNjhy9V5LPEiMeu7RJ970e1SlXDiP5zxUU/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-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
data-count='horizontal' data-via='topbloggingidea' 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%InformatikaRks&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>
<!--Social Subscription Box Tipstrikblogging.com—>
<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://www.434tuto.blogspot.com/'target='_blank' title='Widget Social Subscription'>+ Get This Widget Here</a></div></small>

Something that is important to you change the code above
Change Feedburner TipsTrikBlogging uri-Amatullah and values with your Feedburner account
Change link Facebook, Twitter, Google+, Pinterest and RSS feed with the URL of your social media
Change www.facebook.com/inforamtikarks.Amatullah your facebook fan page. Do not use the http: // and replace (/) with% 2F
Thus tutorial how to create widgets Social Subscription Box. May be useful. Please leave a comment either questions, suggestions or constructive criticism. Thank you for your appreciation!