There are many ways to do this same thing like if you want to add this, you can simply adding a new widget section into your blogger blog header or any other technique, but now here i’m show you to how it done by using an un-ordered list that uses these social media icons like Twitter, Facebook, Google+ ,Feeds RSS, and also it affected with rotation style.
Add Social Media Icons To Your Blogger Header
Step 1 – First of all go to you Blogger.Com account, and then go to “Template” and simply click on the “EDIT HTML” tab.
Step 2 – Now here simply expand your CSS Style sheet or simply click CNTRL + F and find the following code ” ]]></b:skin> “ and then copy below code and paste just above this tag.
/* Social Media icons for Blogger By : www.techora.net
———————————————– */
#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 this time, simply click CNTRL + F and find out this piece of code.
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
Step 4 – Copy below code and just above it paste 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=’http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png’/></a></li>
<li class=’media_icon’><a href=’http://twitter.com/#!/username‘><img border=’0’ src=’http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png’/></a></li>
<li class=’media_icon’><a href=’https://plus.google.com/XXXXXXXXXXXXXXXXXX/about’><img border=’0′ src=’http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png’/></a></li>
<li class=’media_icon’><a href=’https://www.techora.net/feeds/posts/default’><img border=’0′ src=’http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png’/></a></li>
</ul></div>
Recommended Customization :
We’ll always recommended you to customize your widgets as you want to convert it according to your needs. You can easily change the Usernames of your social networking websites in the Red colors above code.
If you want to change the social icons with your own, then simply change the icon URL’s with your own , and if you want to adding more icons in this widget, then add just this code line </ul></div> and then add more icons.
See Example below :
<li class=’media_icon’><a href=’Link URL’><img border=’0′ src=’Image URL’/></a></li>
Step 5 – Now finally you have done your work, now save your Template and see your blog with awesome and super rotative social media icons in the header sections.
