Simple Steps to add Social Icons to your Blogger Header with HTML

A good teacher can inspire hope, ignite the imagination, and instill a love of learning. - Brad Henry

Bloggers challenging part is need to get more readers to your blog. You want to attract more readers as much as possible. The effective way to achieve that goal is to link your blog with social network. You can automatically link the social icons to your blog. Today i come up with simple coding in HTML to add social icons on your Blogger Header. Hope this 4 steps will help you to save your time to add social icons on your blogger.

Step 1 - Edit HTML

Navigate to Blogger > Theme > Edit HTML as shown in the below screenshot.

Step 2 -Search </b:skin>

In Edit HTML, search </b:skin> using Ctrl+F, then paste the below code above </b:skin> tag.

#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 - Search <b:section class='header'>

In Edit HTML, search <b:section class='header'> using Ctrl+F, then paste the below code above <b:section class='header'> tag.

Step 4 - Save Theme and preview

 Refer the below link for the themed social icon images
http://www.carrieloves.com/2012/12/free-social-media-icons-updated

Without HTML knowledge you can add the social media icons, click here.