How To Add Social Media Icons to Blogger Header

In this tutorial I'm going to show you that how to add social media icons to your blogger header which could increase your likelihood. This widget contains icons of Facebook,Google+, Twitter and blog feed and the icons will rotate when you hover over them. Just follow the steps below to add this widget to your blogger blog.

Adding Social Media Icons To Blogger Header                    

Step 1: Go to Dashboard >> Template >> And hit the Edit HTML Button

Step 2: Now Search (Ctrl + F) for ]]></b:skin> and add the following code just above it

/* Social Media icons for Blogger----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
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 (Ctrl + F) for this code.

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

Step 4: And just above it add the following 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/AVvXsEiZWv3Le3g5O-O6bIDPZVCMOmIQDMoPckZnhoLCdh1n9bmpFGnqegwG0iNbEkwQtk7rnXu01kwGSyzDg4jI4PkzJLjTzLKUx9QrxtZwWqDKhZAWyyvxmpxb0RZl0SStbkP2t2aGmEasSHA/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/AVvXsEgAv80MI5YiPpwCsHD35Y6K0HcmUP3Edx4T_hnmvOdWzIzVNPzumXvH8HB0zGasGLLi7OFKAf-fgpIZfUTp-VaHdaeBT6K2OU9ldSwgSvg-XaGukX9Fl0lSGZkkncRVckOZlmprlNlCA2o/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/*****************/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLj81YU4i0S13QoQNTmvalu9c3XMNdloZhzcsoTlBtUKAL5gH0n5hDtUg0ZGSG-4Q7eA2ZrghenQYSaBWhnvN5iXmzGm4G2qrjXtU1P2V4QjyNFnEpzm1887RbThwtWVpAfln-1wqYhY/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://your-blog-name.blogspot.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9rmnC4NbiFG9BinSIxfmuzSWZ_vF1DJjPAEt79sByg3qGssmNWdfNwPbA1PBxJkOjiOKP-d8_UQgY9al6-UORXV707pIYZdWAEKJhftTt7Ap90Ir9u92B7WqIhwudN1IZRTIVoptxps/s1600/RSS.png'/></a></li>

</ul></div>

Customization:

• Replace username with your Facebook and Twitter username.
• Replace ***************** with your Google+ Id.
• Replace your-blog-name with you Blog Name.

---> Do you enjoy this article? Share it with friends/followers and subscribe to this blog now, for you to stay updated with our latest posts.

Share This:

Tags:

Widgets

• Prevoius
• Next