Add attractive header to Social Media Icons

Social Media Icons are added to enhance the beauty of all types of blogs and websites. And by adding Social Media Icon to the Blogger Template Header, the beauty of the blog you want is enhanced much more. For this, everyone wants to add directly to the Header without adding this Social Media icon to elsewhere. I will share the post today that you can use the Unlimited icon if you wish. You can also add an icon to your liking, if you do not like it again. To customize, some of the social media icons set for "Technology.com" can be downloaded. Because of which you will not have to collect this bullet from the Internet and you will find it. Adding these social media icons will not only enhance the beauty of your blog, but also increase the number of fans of your social media.

How to add:

• First log in to your Blogger account.
• Then click on Template> Edit HTML from the Blogger Dashboard.

• Then press Ctrl + F to search ]]> </ b: skin> section.
• Copy the Css code below and paste it above ]]> </ b: skin>

[code start] #social-icons-V2 {

  height:50px;
  width:40%;
  float:right;
  clear:both;
  z-index: 2;
  position: relative;
  margin-right:10px;
  margin-bottom:0px;
}
.social-media-icons-V2 {
  display:table
}
.social-media-icons-V2 ul {
  text-align:right;
  padding:5px 5px 0 0
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
.social-media-icons-V2 ul {
  margin-bottom:0;
  padding:0;
  float:right;
}
.social-media-icons-V2 li.media_icon {
  margin-left:6px;
  padding-left:0 !important;
  background:none !important;
  display:inline;
  float:left;
}
.social-media-icons-V2 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;
}
[code end]

• Then first search the full tag below. If you do not find the full tag, just search the red section.

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

• Copy and paste the following code above the top line.

[code start] <div class='social-media-icons-V2' id='social-icons-V2'>

<ul>
 <li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvERkPz3aCu66x37Pw-B7mE-Gc3LmYDO6c1u60HxRGTfUYgN8aLLZp8TAxKHntCRTNNwZgZIJjgVUIM_OgDWhsD1QgdrLZYOUwI8xa9GzXmkXiNQhq3l6TAdKdlKCNaJnqQcnYPJcWQo/s1600/FB.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSvtyS8CJ3PfNEMI80nKJGbSLY2xGgBTwyQ5PU4oY-9KsRjIFm-CqcA6AS6Z-aZmyh1roo2B2Gp5joT_iSRD0F3SDwI3nPmHCRfw9v_EQQqkft3I_KDRPqwOFQ18JwS97J-6WGv1Gz3H0/s1600/Tw.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ucQRox2tVU5bsNbFU3RQ0cLT4EBupKPqc0fBnFyy23UjVFc0fpODazZGa-2Ol9paE3xeLVnpn2-lsCYcGJrt8QD7qPGs8AlyO_9YpbELDEfzInhhC7E5f8xhkxTl0YOglAwnciqXcco/s1600/Go.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5JtAZmpXOdWjK0YMQuNbM_QFftlq0VDLPQ_DjjivT_Dym-tu8lq-KMDf2cMMmo5Ex8R3PpfEwQrxPjMYhjg4sYFdp_jD2Aj3PE1xUPFdSjl6tyuT7j93rkwaYuQ2NGSdjTI8_lLtxWw/s1600/YT.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Pinterest"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Nqk0A1bBIBvqq9FK3vQ02XwgbE71qKENrpDFcu8KNc3W5XfvEAR2KrHFOVaj18KIFmBbGhJyWfv9nxepUqMWktho6dMdydJWudnzMx-7gdAlvkC_NtUf2LGSOwfHaQO2dCbiizTqXVY/s1600/Pi.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1DN4QImZT_Y9qILCULAr2svdz2YNrwrvgTEgZAyYYMPTyBFVw5zW5j1xwPmEXkvZ12rZmooiMhfDOtFIENxDUclMLZgwBTQpoEQesxPrjSVf3S3DsoefeopSNZ6XTKi-yxk16h_iyRs/s1600/Rs.png" /></a></li>
</ul></div> [code end]

• Finally, click Save Template.

Customization:

• Give your Social Media Url instead of #
• If you want to remove an icon <li ... </ li> delete the part.
• If you want to add a new icon, download it from here.