How To Add Social Media Icons to Blogger Header

This guide will help you add social media icons to the top right corner of your page, which will give readers more opportunities to follow different social networks. There are several ways to do this, such as adding a new puzzle section to the blog header, but for now we'll use a confusing list using the Facebook, Twitter, Google+ and Feed blog icons, and as add-ons, icons. they will rotate as you move through them.

You can watch a demo on this test blog.

Add social media icons to the Blogger header

Step 1: Go to the Template section of the Blogger Management screen and click the Edit HTML button:

Step 2. To expand the style, click on the small arrow on the left ... ( Screenshot 1 ) and click anywhere in the code field (using CTRL + F) ]]> Take a look ( screenshot 2 ) and add the following code:

/ * Social icons for bloggers
-------------------------------------------------- * /

# social icons {
bottom margin: -30px;
Height: 50px;
Width: 100%;
both clean;
Z-index: 2;
position: relative;
}
.social icon {
Screen: table
}
.social-media-icon ul {
Align text: right;
Fill in: 5px 5px 0 0
List image: No;
list style position: away;
list style type: none;
}
.social-media-icon ul {
lower limit: 0;
fill: 0;
move the cursor to the right;
}
.social network icons li.media_icon {
left margin: 6 pixels;
fill-to-the-left: 0! important;
Background: No!
Display: Online;
Swimmer: left;
}
.social-media-icon li: passing {
-moz-transform: rotate (360 degrees);
-webkit-transform: rotate (360 degrees);
-o-transform: rotate (360 degrees);
transform: rotate (-360 degrees);
-moz transition: in and out every 0.5s;
-webkit transition: entry and exit every 0.5s;
-o transition: in and out every 0.5s;
-ms transition: in and out every 0.5 s;
transition: input and output every 0.5s;
}

Screenshot 1:

Screenshot 2:

Step 3. Now find this line

Step 4: Add the following code:

• 



• 



• 



• 

personification

- Change the highlight with your username and ID: the first is your Facebook username, the second is Twitter, the third is to change Xa to your Google+ profile ID, and the fourth is to enter your blog name.
- To change the icons, replace the blue highlighted URLs with the URLs in your image.
- You can add more icons if you wish, just add them beforehand