Simplex Design blog : Stylish Social Sharing And Email Subscription Widget Under Blog Post For Blogger

Link to SimplexDesign - free blogger template

Stylish Social Sharing And Email Subscription Widget Under Blog Post For Blogger

Posted: 17 Jun 2014 10:00 PM PDT

About The Widget

This is a really stylish and elegant social sharing widget with an stylish email subscription box having an hover effect on it's subscribe button and even awesome font. You can also add this awesome widget to your blog from the tutorial provided below.

Steps to add it:-

•    Go to Template tab of your blog's html
•    Search for <footer> or <div id='footer'> or <div id='footer'> or <div class='post-footer-line post-footer-line-1'>
•    Add the following piece of codes above it

<section class="technopcarea-newsletter">
<h2>
Checking for new posts is time wasting,
</h2>
<div id="form-technopcarea-newsletter">
<div class="technopcarea-social facebook">
<a href="https://www.facebook.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/RbZgdq2.png" />
    </a><a href='http://technopcarea.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFRrmPDbSBP4kwBj5BWVZ9QTDTgVzS0heTIIlQIGx_z2_kiL65EcQjjlK96xUOW3CmubYAPIQG1zN_lUrSL278NzlGSDDFa7HGT7d962USthIweWhMnrtGvrQfvBOG3euWQcVKrJPyAM/s1600/1x1juice.png'/></a>
    <iframe allowtransparency="true" class="technopcarea-social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTechnoPcArea&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
</div>
<div class="technopcarea-social twitter">
<a href="https://twitter.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/0A1kead.png" />
    </a>
    <iframe allowtransparency="true" class="technopcarea-social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TechnoPcArea&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
</div>
<div class="technopcarea-newsletter-form">
<fieldset>
<h2>
When you can get them all in your inbox.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=TechnoPcArea', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="TechnoPcArea" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
input { font-family: Open Sans; }
h2 {font-family: Open Sans; }
.technopcarea-newsletter{text-align:center;margin:20px 0;}
.technopcarea-newsletter .technopcarea-social.facebook{background:none repeat scroll 0 0 #3661A0}
.technopcarea-newsletter .technopcarea-social{padding-top:20%;width:20%;float:left;position:relative}
.technopcarea-newsletter #form-technopcarea-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.technopcarea-newsletter:before,.technopcarea-newsletter:after{content:&quot; &quot;;display:table}
.technopcarea-newsletter:after{clear:both}
.technopcarea-newsletter h2{color:#3B434D;font-family:Sniglet;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.technopcarea-newsletter .technopcarea-social.twitter{background:none repeat scroll 0 0 #00ACED}
.technopcarea-newsletter .technopcarea-social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.technopcarea-newsletter .technopcarea-social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.technopcarea-newsletter .technopcarea-social a:hover img{transform:scale(1.1)}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box{bottom:20px;left:50%;position:absolute}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.fb-like{margin-left:-45px}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.twitter-follow-button{margin-left:-30px}
.technopcarea-newsletter .technopcarea-newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset{height:37px;left:10%;position:absolute;top:10%;width:80%;border:none}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:11px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".technopcarea-newsletter #form-technopcarea-newsletter").width() * 0.025; // 10% of container width
    $(".technopcarea-newsletter .technopcarea-newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

• Replace my highlighted facebook,twitter and feedburner usernames with yours

Final Words

This amazing widget can help you to increase your social stats highly and even this widget doesn't affects the loading time of your website. You can also change the text that appears on the top of the widget.