Membuat Icon Media Sosial

Apakah sobat memiliki medsos? Punya? Twitter, Facebook, Google Plus, RSS..dll... Membuatnya tapi tidak tahu bagaima caranya. Ini mudah! Hanya dua tahap saja. Namun yang ditampilkan hanya Facebook, Twitter, Pinterest, Google Plus, RSS. Jika tidak punya dari salah satu disitu, ikuti saja tahap berikut. Pertama-tama, masuk ke Blogger sobat... Pilih blog sobat yang mau di customize.

Mulai..! Tahap 1 Tambahkan Icon
1. Masuk ke dasbor.
2. Klik Template > Edit HTML
3. Cari kode <div class='region-inner header-inner'>
4. Pastekan kode ini tepat dibawahnya.

<div id='socmed-icons'>
<a href='https://www.facebook.com/username' imageanchor='1' style='margin: 1em10px;'><img border='0' src='http://icons.iconarchive.com/icons/designbolts/cute-social-media/48/Facebook-icon.png'/></a>
<a href='https://www.twitter.com/username' imageanchor='1' style='margin: 1em10px;'><img border='0' src='http://icons.iconarchive.com/icons/designbolts/cute-social-media/48/Twitter-icon.png'/></a>
<a href='https://www.plus.google.com/id anda' imageanchor='1' style='margin: 1em10px;'><img border='0' src='http://icons.iconarchive.com/icons/designbolts/cute-social-media/48/Google-Plus-icon.png'/></a>
<a href='https://www.pinterest.com/username' imageanchor='1' style='margin: 1em10px;'><img border='0' src='http://icons.iconarchive.com/icons/designbolts/cute-social-media/48/Pinterest-icon.png'/></a>
<a href='url blog/feeds/posts/default' imageanchor='1' style='margin: 1em10px;'><img border='0' src='http://icons.iconarchive.com/icons/designbolts/cute-social-media/48/RSS-icon.png'/></a>
</div>

Ganti username, id-anda, urlblog yang dimaksud.....
Jika kamu tidak mempunyai medsos dari itu, hapus dari <a href=....> sampai <img border ..... /></a>. untuk mengganti lebih baik, ikuti tahap ini..
Tahap 2 Tambahkan CSS
1. Cari kode ]]></b:skin> dengan CTRL + F
2. Pastekan kode berikut tepat di atasnya.

/* Transform Social Buttons By Tutorial Blogger */

#socmed-icons {
padding: 0 5px 0 0;
margin: 0 5px 0 0;
text-align: right;
}
#socmed-icons a img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#socmed-icons a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

3. Klik Simpan!
Lihat blog... dan... lihat di pojok kanannya..! :D
Cukup sekian tips tentang membuat icon media sosial di pojok kanan header. Share ya..! :)
Semoga bermanfaat :-d