Hi,
Here you will learn how to add social media icons in the header of the blogger website. These social media icons are elegant looking and you can also customize your social media icons. Here you will get social media icons of popular social media like Facebook, youtube, Instagram, WhatsApp and more.

how to add social media icons to blogger
social media icons in blogger


Quick Navigation

  1. Steps to add social media icons in the header
  2. Customization of code


Steps To add Social media to your website
  • Login in your blogger account and then go to blogger dashboard
  • Now move to theme section and edit HTML
  • Now click anywhere and press Ctrl + F key on keyboard and search ]]></b:skin>  tag
  • After that paste the following code above ]]></b:skin> tag.


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

  • Now again search for this line (or search id='header')
<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'
  • Above this paste the following code
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='YOUTUBE-LINK' ><img border='0' src='https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/136/Social_Media_Socialmedia_network_share_socialnetwork_network-31-512.png'/></a></li>
<li class='media_icon'><a href='FACEBOOK-LINK'><img border='0' src='https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/133/Social_Media_Socialmedia_network_share_socialnetwork_network-09-512.png'/></a></li>
<li class='media_icon'><a href='TWITTER-LINK'><img border='0' src='https://cdn4.iconfinder.com/data/icons/miu-gloss-social/60/twitter-512.png'/></a></li>
<li class='media_icon'><a href='INSTAGRAM-LINK'><img border='0' src='https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-instagram-new-circle-512.png’/></a></li>
<li class='media_icon'><a href='RSS-LINK'><img border='0' src='https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/134/Social_Media_Socialmedia_network_share_socialnetwork_network-20-512.png'/></a></li>
<li class='media_icon'><a href='PINTREST-LINK'><img border='0' src='https://cdn1.iconfinder.com/data/icons/social-media-set-for-free/32/pintrest-512.png'/></a></li>
<li class='media_icon'><a href='WHATSAPP-LINK'><img border='0' src='https://cdn4.iconfinder.com/data/icons/miu-gloss-social/60/whatsapp-512.png'/></a></li>
</ul></div>
  • Now save your templates.That's All
Customization
<li class='media_icon'><a href='Your Link'><img border='0' src='ICON URL'/></a></li>

 If you are getting any error or any problem or code not working then comment below, we will update it.