Membuat Tombol Icon Social di Blog

Tanpa basa-basi, langsung saja ikuti langkah-langkah di bawah ini:

1. Login ke Blogger

2. Pilih menu Template

3. Lalu pilih Edit HTML

4. Centang Expand terlebih dahulu

5. Cari kode ]]></b:skin>

6. Masukkan kode css ini di atas kode ]]></b:skin>

/* Mickeymaru social icon */
#social-networking li { float: left; }
#social-networking a
{ display: block;padding: 0 10px 0 0;position: relative; }
#social-networking span
{opacity:0.5;width:24px;height:24px;display: block;border:4px solid #333;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-transition: all .1s linear;-webkit-transition: all .15s ease-in-out;transition: all .15s ease-in-out;
}
#social-networking span:hover
{border:4px solid #888;opacity:0.9;}
#social-networking .social-icon
{ background: url('http://4.bp.blogspot.com/-xWyhwRsNxmY/T0u_sVGz8QI/AAAAAAAAHck/p77h_vjely0/s1600/social.png') no-repeat;}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }

Setelah itu kode HTML dibawah ini terserah mau taruh dimana di atas footer ataupun di atas header, asalkan tidak error.
Sekian artikel dari Wirabaz Blog kali ini, semoga dapat bermanfaat. Terima kasih sudah berkunjung dan sampai jumpa di artikel selanjutnya.