How To Add Social Site Icons To Your Blog

This post is aimed at giving you a easy step by step guidance about how to add icons of the most popular 'Social Sites' namely 'Facebook' 'Twitter' 'Google plus' 'Tumblr' and also 'Blog Feed'. The addition of these icons with an attractive rotating effect, increases the likelihood of the viewers clicking on them and revisit your blog.

Step : 1  Login to your Blogger dashboard and then click on 'Template'


Step : 2  Now click on 'Edit HTML' ( a page of html codes will load )

                                                   

Step : 3  Now find the following code and click on the small arrow on its left

                           Code to find : <b:skin>...</b:skin>

                                  

Step : 4  Now click anywhere in the page and press (Ctrl+f) - this will open up a small box at the top right corner


Step : 5  Now type ]]></b:skin> inside the box and hit enter

                                                                         

Step : 6  You will be shown </b:skin> marked yellow


Step : 7  Now add the following html code just above </b:skin>

Selectable code :

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

#social-icons {
margin-bottom:-30px;
height:50px;
width:50%;
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 : 8  Now search for the following code :-

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

***Note : In the following 'screen shot'  'showaddelement='no'> appears as 'showaddelement='yes'> , it has a different purpose and it will be discussed later. In your case it will appear as  'showaddelement='no'>.  Just click on the 'screen shot' and you it will be clearly understood.   

                                                       

Step : 9  Now just above this code copy & paste the following code :-

Start of 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/AVvXsEiD1k3EPkjysUHJkSmuRCYe7zLHt3CeMFNZimwb9aKP7pDdEreFrwc-fr-qSR-AlWVMocsn5nogTYlEfutq6naO_lpUPNEpJ9Z8nh24fZtb3vl2aK2RXsAgurAmqLC4hLBeiSQ7JGRcm1w/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/AVvXsEgF6DmddlytnSlx_I9xXPVSLiJzhaNJdNKrKKqI-aEzW_HgaG1Nk-PRXZeWdi-RAGAYpA7qMGZQk0nlVyvijNoxSFrl4Hgi-E4ILc7-hzhiAEcDNKuQP0C3pyWVaE8A4pB-Hn0cPPuY7ks/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='http://tumblr.com/username/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1XQeSiSlGxHjV0EPNE1gzQc1SOXGsnfYIbymiwxQidonUmWhu7KK5vXXJvLovIgo3JlQOoSrbTWOB9XklVTFQCBNkgU4bfJGzvfE_ep637e4mEYDeVt0B0joEOKEtQK0lg2WOLGb3kM/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5iNg-Se3V_uEzB86vTzO7Mdct7o4WDxVfwyw6PFQk-fGPdUpz_i3imNTBozuyY7m1XES4GGhV3iOEEbAHBZ_J6AC6Co4Qi1MA4vQhlFMKD1cqyjDjMwjcFUJamoa2k53bK-MaDl7wpc/s1600/RSS.png'/></a></li>

</ul></div>

_______________________________________________________________________________

End of Code

Customize :-

Now add your Username (in what is marked in pink) of Facebook/Twitter/Tumblr/and Name of your blog in the fourth. To insert a different icon just replace what is shown in blue with the url of your new icon.

Step : 10   Click Save & you are done.


Read more :

9 Ways About How To Choose The Ideal Blogger's Platform That Keeps You Growing

7 Awesome Domain Name Generators For Your Awesome Blog

The Easiest Way To Stop Earning With Your Blog And Start Earning Massive