How To Add Social Media Icons for Blogger

In this tutorial we give you help about how to Add Social Media Icons for Blogger in Header at the top right corner of the page for attract... thumbnail 1 summary

11:39:00 AM

In this tutorial we give you help about how to Add Social Media Icons for Blogger in Header at the top right corner of the page for attract user to follow your blog on the various social networks sites. There are many ways to add social media icons to blogger but we provide you easiest way to add it on your blog. This icon included various social networking sites like Facebook, Twitter, Google+, blog feed etc. and you can also customize as you wish.

How To Add Social Media Icons

Please follow below steps for add social medial icons to blogger:

Step 1

Step 2

Search below code with help of CTRL + F

]]></b:skin>

Step 3

Add below code just above it:

/* 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 0list-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;}

Step 4

Now search below line

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

Step 5

Copy and paste below code:

<div class='social-media-icons' id='social-icons'><ul>
<div class='social-media-icons' id='social-icons'><ul>
<li class='media_icon'><a href='http://facebook.com/haakblog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOK3IKinDrUNNb_UCAYW3J2pze6EA4YMf-_xn3rZjQEgjqV3f7Id5HWgnDx9tQJQ7CxHihUe5VQTwmFDs5gvZee404zfhvtdo0H0SIk1RLaVA1mgdNhQlljifyCX4G51GaS_Td4QdgSHg/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/haakblog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomb2qhJd8isFThDi8T-DZFLbmiVweljojQzu6YtdToSlY98_sp59-dvPK3b0h0Lc_t1-uftb8FpGbnw4Esz7PSUKaF2-gUqUMzS3PbmFlQ4HPa-CIb1u1IlfOuqhK0to2bPUAAAoulzU/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8xMCFTDKC4LxpP0qMR6ivc2ANyTR5UXmURtuEMgbWT_xDudBTVJ3_KvQDF4eqTE0C1GE5GG3awgoFpjl9EgtKqx20oQFUZjBJL0eZOq15kTmW3VQtHTQUlg2viKM7tX2fDxXnBb4wfE/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://www.haakblog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWucWv9XwhfoFaFd42n0n3HCvB7ZKsFBCwYBSAuKmiOh4VLJ_YEkkaFzIqtJLcpH_HHb-bxTeDIdY2pEqkMwMO1miouYQXPiDpnjCbmady00PAh0lkZbiDPdCJVaaoO0ULtdVVkfbQmaw/s1600/RSS.png'/></a></li>
</ul></div>

<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Blogger tricks</a>
</div>

Tips: Change Facebook page URL to your Facebook page URL, Change Twitter username with your twitter account, change google plus id with your google plus id and also change feed url.

Step 6

Click on Save Template button.