Menunggu...

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 :

  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.

Sumber kode : http://www.tipstrikblogging.com/2013/05/membuat-social-profile-widget-keren.html
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 3 komentar:

avatar

makasih gan! bermanfaat, tapi kalau mau besar dan kecilkan ukurannya gimana?

avatar

Sobat tinggal mengganti angka pada widht dan height nya.. Salam blogger

avatar

Salam Blogger, Keren Artikel nya mas




http://www.hamdanalam.com

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda