TUTORIAL IT

<data:post.body/>

<data:post.body/>

<section class="newsletter">
    <h2>
    Tired of checking for new posts ?
    </h2>
    <div id="form-newsletter">
    <div class="social facebook">
    <a href="https://www.facebook.com/newsville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmKt7iajFocWE5-ggDsBFfDErQ2YM7dZxAe9hkazqRf0GHJHLAEnaDDjGSEYyuASFcvI1Eq7SNaMGgTvcrcbMbzpwmie2D-_FlMlSi3G-EfiGFPYhFVZhiGIsJ6itWy1KUFQR-8jGQQFY/s1600/nl-facebook@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnewsville&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="social twitter">
    <a href="https://twitter.com/news_ville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP4z0ZB7IaiU-tITV06aPK2ZA_RWGzDtci7XKA2kD5-knEeHxMUrSGYPY-UlsbSWpVrenswXt8FqWEviud7xDfWbbMHQtHHEYG196BCn5LxWz3jvgb03i7w-VzMKpWT2F6QXQPQJNHdD5h/s1600/nl-twitter@2x.png" />
        </a>
        <iframe allowtransparency="true" class="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=informationtutorial158&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="newsletter-form">
    <fieldset>
    <h2>
           Get all posts directly in your mail.
          </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=informationtutorial158', '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="informationtutorial158" />
              <input name="loc" type="hidden" value="en_US" />
              <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
    </div>
    </fieldset>
    </div>
    </div>
    </section>
    <style>
    .newsletter{text-align:center;margin:20px 0;}
    .newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
    .newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
    .newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
    .newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
    .newsletter:after{clear:both}
    .newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
    .newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
    .newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
    .newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
    .newsletter .social a:hover img{transform:scale(1.1)}
    .newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
    .newsletter .social .social-box.fb-like{margin-left:-45px}
    .newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
    .newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
    .newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
    .newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
    .newsletter .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:10px;transition:all ease 0.6s;}
    .fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
    </style>
    <script type="text/JavaScript">
    fontsize = function () {
        var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
        $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
    };
    $(window).resize(fontsize);
    $(document).ready(fontsize);
    </script> 

<data:post.body/>

Adding the social media Icons to Blogger Header makes it easier for readers to follow your blog on social networking sites like facebook, twitter and google+ since they're placed in a better location on your blog.. These social media icons will be placed at the top right corner of the blog's header, and with a rotating effect when a cursor is hovered on them. Below are the guidelines on how to Add Social Media Icons to Blogger Header.

•  From your blogger dashboard,
• Navigate to template.
• Click on 'Edit HTML'
• Click Inside your template, using Ctrl+F keys search for ]]></b:skin>
• Copy the code below and paste 'above'    ]]></b:skin>

  Also Read: Floating Social Share Buttons For Blogger
                     Add Facebook Invite Friends Button With Timer In Blogger 

/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

• Next, search for this line of code below in your template  

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

• Copy this code below and paste 'above' that line of code.

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhep7nrEgibRRxQE4wCzzSBS0UUmw7ibeghO39PWeEsZ14MF0PhxqJmfpbPoZHKN-Xzvf8CpKuh0ubtkB-B5aXZYRzZw7j3QHzjZxynT2tqEQPs1EcwROdE76tBDTdBkKJWtEpMPCWYt5Q/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/USERNAME'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe2Nh-fo6Eo8E7AgxVF465oDITcWnb2i06ikk388Rb83elTXmnVMzy2eS6D8N6LkQw4bgUvnVFlxlQEmfl-4q9z2CM9E29rx9rtSjpgzWfSd6FK1B9bpV99A3xQK6ATlp_yOp7RBYQ82w/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/ID/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxffJluqDcDcc6oDCQ-zjFyNdQUV9Im4iN0t-RmRT33Fp_-sh_0JThXErv5GdYbqb-u_0c-e9OOWbO1eWHX-wYab_K9rwB85S-RwtU6gfECAE5mYwXbmxkHDycCQrn6BXT4zEvevp6No/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://BLOG-NAME.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdCehR6A7qZbgyhoChY36vXVpPr3Cbag4kiB5fywjgwUlOLHaIpQaou1v7UgreauJSPV0wzE4t3c-GQnDh6jwAy1U7h6Pqi0_ySlZOthhAb7Vw3tkPAlnDwafC8ZYKWqCt24Xy6QzEzg/s1600/RSS.png'/></a></li>

</ul></div>

• Customize the last code above by replacing the text in blue with your Facebook page username, twitter username, google+ ID and your blog URL.
• To change the default images, replace the URL in red with your image URL.
• To add more social media icons, include this line of code before </u> tag

<li class='media_icon'><a href='SOCIAL-MEDIA-URL'><img border='0' src='YOUR-IMAGE-URL'/></a></li>