How to Add Social Media Buttons to Blogger Header

Hello bloggers friends, adding social media icons to your blog is the way of getting visitors on your own blog. By adding social media buttons you can increase your blog traffic. Social media buttons should be attractive and to be located in a correct place to make more clicks on your blog. Right area to add social button on your blog is header of your blog. Social Media buttons is like Facebook button, Twitter button and Google Plus button.

For doing this you may requires to edit your HTML. So for security reason backup your template before you start adding buttons.

Let me explain how to add social media buttons to of your blog.

    1-Go to Blog Dashboard  Template Edit HTML

Choose Edit HTML Section

2-Search for ]]></b:skin> using Ctrl+F

3-Add the below CSS code just before ]]></b:skin>
/* trickstoo.com Social icons for Blogger ----------------------------------------------- */
#social-icons {

margin-bottom:-30px;
height:50px;
width:100%;
display:block;
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;
}

4-And Then Search Below Line

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

5-And Then paste the below code to the above searched code
<div class='social-media-icons' id='social-icons'>

<ul>

<li class='media_icon'>

<a href='http://facebook.com/trickstoo'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NJXWZSFgmOQuuiXzlyF206NTg79gi5DOBmxjoJ3gEcLaF1WCWvl-HcmcVqOGt-0YMgy1oMsWhF_fvPf-xu-rUViQWpx2QL-nsVrcOPtg_EQmQbRUD_-aK8KunffNR4vkP8Nz6h1s9uc/s1600/Facebook.png'/></a></li>

<li class='media_icon'>

<a href='http://twitter.com/shanmugam39'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLr4Aswmx2-3biq-8D_cSrG7ttOSOgQQ_vKxHPoE1qX3L6o1e4qFNdz3YEUvtq7IxCE2XtbhyphenhyphenygGQwez1mIvx9XRbEs2VbLGWC69UAUEhkZqfPqYxP59neG2frjiKBNqgpVlSpPoaHW6M/s1600/Twitter.png'/></a></li>

<li class='media_icon'>

<a href='https://plus.google.com/106667632864485528784'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIw2M6L4Ypsxx1hje4-IFz4tCkA26eSj9yphRPVt_UesipVeZIJ0D6n-IG6ocAJ0G5NASI9rwvK7hPC32dg36NQ1CKsTN1KlqR1wuopXUGW-iPd4FmIrUBNBYTAsamnn52GMj0NmGM8uQ/s1600/googleplus.png'/></a></li>

<li class='media_icon'>

<a href='http://trickstoo.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0o5iofATRmns6AZhmThGY83T8v_paC3IkUwnruPzbJ5m02qBYGWUueOeyf6gRrTufYD25JrFE5HMzl0_MxL2Jvzdg04PI6UiJ2KUugNwa6eWCq8Rql0pHyGZ1yfaQokvk3LMeOhY2JU/s1600/RSS.png'/></a></li>

</ul>

</div>

    6-And Then replaced your page name on Facebook, Twitter, Google+ and your Blog URL.

    7-And Now Saved Your Blog Template and Apply Changes.