How To Add Social Media Icon In blogger Header

How To Add Social Media Icon In blogger Header Urdu/Hindi Tutorial 2017 ...

 

Adding Social Media Icons to Blogger Header..

 Step 1. From your Blogger dashboard, go to Template  and click on the Edit Html Button.

 Step 2.To expand the style, click on the small arrow on the left then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin>;

tag and add this code just above it:

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

Step 3  Now search for this word

showaddelement

Step 4 And just above it, add this 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/AVvXsEjaotOaEVpTsb2nqOBA_iFD8QVbkvPCK_C9iKCnGPYmrzcU6pRp3lzuYMXPVw2FxGPlCL4t2-aTEahVZEYoAo4ja200runxcNa9SdzEhYv93lPlr4Ffn7Z5OPM5WCWA5-au_a_x218LPNk/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/AVvXsEjDnEFGXTfVKtMoPZgS1nJ-69R30xrkXLIavn-Wv8UKj1iN36TGrmArT6Zc4xv3PSCI5FLv0buLTPzP2sAp9QYCUhYejIoW0HqSJ0OgyDDNy0h_Zc7s2hC_IZIyTm7eDoqkHnisf4MjIAo/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/AVvXsEibbhux1-rRJDvJa2E70BqkKqI9we9psIoICqib9HZfFvgG9HbRFl8igMeJIBdQqTl0CLAy3F8gcBd_Vtd-Nxc1Go7fa72prm2RJtaM__0CI_DooLEnCi0gvx8_NTk9Y3WLr35oU5MXLN0/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-GqrhOMiLRrR5ajU1iZeXej8WH9RFj8Ce8VjIkroL-B253HJUnrN0nsGM8-B0E8cOqzLs8tZ7Rm1ojbqHFEObw42DCc8t8lcNO7_JcoZFQjcarb4ANdWQOdrSqw1FIFswlE6ijAoKRc/s1600/RSS.png'/></a></li>

</ul></div>

Customize

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.

- To change the icons, just replace the urls in blue with the ones of your images.

- You can add more icons if you want, you just have to add before 

  a line like this for each extra icon you want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

 Step 5 Finally, Save the Template to apply the changes.

The effect is done with CSS3, so this effect will not work in older browsers.