How To Add Together Social Media Icons To Blogger Header

adding a novel widget department to the weblog header but now, we'll produce it using an unordered listing that uses icons of Facebook, Twitter, Google+ as well as weblog feed, as well as every bit a bonus, the icons volition rotate when y'all hover over them.

You tin meet a demo inwards this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, become to Template as well as click on the Edit HTML button:

Step 2. To expand the style, click on the pocket-size arrow on the left of ... (screenshot 1), as well as thence click anywhere within the code expanse to search (using CTRL + F) for the ]]> tag (screenshot 2) as well as add together this code merely higher upwards 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;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

Step 4. And merely higher upwards it, add together this code:

• 



• 



• 



• 

Customization

- Change what's inwards cherry amongst your usernames as well as id: the start is your Facebook username, the instant is that of Twitter, inwards the 3rd y'all should alter the X past times the ID of your Google+ profile as well as inwards the quaternary y'all volition pose the refer of your blog.
- To alter the icons, merely supervene upon the urls inwards blueish amongst the ones of your images.
- You tin add together to a greater extent than icons if y'all want, y'all merely accept to add together earlier

a draw of piece of employment similar this for each extra icon y'all want:

Step 5. Finally, Save the Template to apply the changes.
The lawsuit is done amongst CSS3, thence this lawsuit volition non live on inwards older browsers.