Membuat Social Profile Keren dan Lengkap

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 :

1. Setelah login ke akun blogger sobat bisa langsung ke pengaturan Tata Letak
2. Pilih penempatan widget sesuai keinginan dan kilik Tambah Gadget
3. Selanjutnya sobat bisa pilih HTML/JavaScript dengan cara mengklik
4. 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 :

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

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

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit