Membuat Social Profile Keren dan Lengkap

Sebuah blog tentunya akan lebih menarik jika kita bisa mensiasatinya. Salah satu cara yang sederhana adalah dengan membuat social profile yang keren dan lengkap seperti contoh gambar di samping.

Jika sebelumnya saya pernah membahas subscribe keren lengkap dengan sosial media yang di lengkapi dengan fitur email langganan dan beberapa fitur sosial media, pada kesempatan kali ini saya akan mengkhususkan membahas tentang social profile yang sering kita gunakan seperti facebook, twitter, google+, pintereset, linkedin, youtube dan feedburner.

Sobat pastinya tahu kan tentang ketujuh sosial media yang saya sebutkan di atas dan pengaruhnya buat blog sobat? jika sobat merasa tertarik dengan artikel ini silahkan sobat simak sampai habis. Berikut cara membuat atau memasang social profile yang keren dan lengkap dengan ketujuh sosial media :

Setelah login ke akun blogger sobat bisa langsung ke pengaturan Tata Letak
Pilih penempatan widget sesuai keinginan dan kilik Tambah Gadget
Selanjutnya sobat bisa pilih HTML/JavaScript dengan cara mengklik
Masukkan kode CSS berikut dengan cara mengcopy

<div class='metro-social'> <li><a class="fb" href=http://www.facebook.com/ID FACEBOOK rel="nofollow"></a></li> <li><a class="tw" href=http://twitter.com/ID TWITTER></a></li> <li><a class="gp" href="https://plus.google.com/ID GOOGLE PLUS"></a></li> <li><a class="pi" href=http://pinterest.com/ID PINTEREST rel="nofollow"></a></li> <li><a class="in" href=https://www.linkedin.com/in/ID LINKEDIN rel="nofollow"></a></li> <li><a class="yt" href=http://www.youtube.com/ID YOUTUBE></a></li> <li><a class="fd" href=http://feeds.feedburner.com/ID FEEDBURNER rel="nofollow"></a></li> </div> <style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>

5. Simpan dan lihat hasilnya

Catatan :
Perhatikan tulisan yang di cetak tebal dan berwarna orange, pastikan sobat ganti dengan ID social profile yang sobat miliki

Kelebihan dengan memasang widget ini adalah :

Menampilkan 7 sosial media yang sudah cukup ternama ( khususnya facebook sehingga penampilanya lebih menonjol )
Memiliki efek hover ketika mouse di arahkan
Tidak menggunakan JavaSript karena murni CSS sehingga mempercepat loading
Tanpa jquery yang memperlambat loading

Demikian sedikit pembahasan tentang cara membuat social profile keren dan lengkap yang bisa saya bagi, semoga bermanfaat.

Sumber kode : http://www.tipstrikblogging.com/2013/05/membuat-social-profile-widget-keren.html