108 Membuat Social Profile Widget Keren: Metro UI

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

social profil widget keren Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati.

View Demo

Fitur

  • Meliputi 7 jejaring social yang paling sering digunakan
  • Efek hover dan desain yang elegan,
  • Sangat rapi dan bersih
  • Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger
  • Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
  • Copy dan paste kode berikut pada kolom konten:
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur 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>

Kustomisasi: Ganti link profil saya dengan link profil milik anda.
  • Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

108 komentar :

  1. Wah...ada yg baru lagi. Ini cocok untuk blogger yg ingin menaikkan traffik,bener kan mbak? Lengkap banget social widgetnya,kerennya lagi dibungkus dalam 1 kemasan. Sukses ya mbak? :)

    BalasHapus
    Balasan
    1. Ya mbak kayaknya lebih paham deh, salam sukses juga mbak, sll insyaAllah.

      Hapus
  2. ok dah! lengkap sekali :) sangat menunjang untuk pemula urutan langkahnya...salam mbakyu :>) vis

    BalasHapus
    Balasan
    1. Yup, terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  3. Request boleh ndak yah? heheheh
    Maaf Oot mbak, kalau ingin kasih emoticon di postingan yg support dgn script emoticon ini gmn mbak.Sy coba punya mas Abdul Rahman ndak jalan mbak (p)

    BalasHapus
    Balasan
    1. sepertinya script emoticon disini sama dengan punya mas Abdul Rahman.
      artinya hanya perlu menambahkan area baru di mana gambar emoticon mau di tampilkan..
      default untuk area komentar klo tidk salah seperti ini:
      var emoRange = "#comments p, div.emoWrap",
      sehingga untuk menampilkan efek emoticon pada postingan ditambahkan area dari postingan misal pada blog ini areanya nama classnya post-body jadi kodenya seperti ini:
      var emoRange = "#comments p, div.emoWrap, div.post-body",
      klo di blog mbak yg http://sweet-myheart.blogspot.com/ kode seperti diatas juga akan berfungsi..

      Hapus
    2. Nah dah dijawab sama masternya, dicobain coba mbak indah! Tapi insyaAllah nanti anaa buatin juga tutorialnya untuk yang lain.

      Hapus
    3. saya juga lagi nyari yang ginian, ga ada yang cocok...

      di tunggu tutorialnya

      Hapus
    4. Jangan2 mas MKR ini ..... ndak jadi ah. :-d
      Masih gagal mas..padahal langkah2nya udah saya sesuaikan dgn tutorialnya mas Rachman

      Hapus
    5. betul tuh pada var emoRange tambahin aja class atau ID dari area postingannya, ntar tergenerate secara otomatis deh tu

      Hapus
    6. @Indah P: jangan2 apa hayoo..
      masalahnya mungkin karena klo mbak memposting menggunakan fasilitas justify serta pengaturan font yang ada blogger. Sehingga yang awalnya tulisan paragraf langsung ada pada area div.post-body tapi karena adanya pengaturan tersebut jadi tulisan dimasukkan dulu dalam tag span.
      Jadi seharusnya penulisan codenya seperti ini:
      var emoRange = "#comments p, div.emoWrap, div.post-body span",

      Hapus
  4. minta idzin menggunakannya ya :)
    makasih..

    BalasHapus
    Balasan
    1. Silahkan, nggak perlu izin lagi karena ini gratis kok. :)

      Hapus
  5. liat demonya keren ... :D

    BalasHapus
    Balasan
    1. Ya iya dong, makanya dikasih nama social profil widget keren. Asli memang keren :d

      Hapus
  6. Terima kasih....social profile cantik

    BalasHapus
    Balasan
    1. Sama-sama Pak Gildo, salam kenal tuk bu Santy.

      Hapus
  7. digabung jadi satu paket, keren mbak!!!

    BalasHapus
    Balasan
    1. Yaa... Social Profil Widget Keren (Bukan Basa-Basi).

      Hapus
  8. Kayaknya menarik..
    btw maaf belum bisa membuatkan responsive template untuk blog ini..
    sya akan buatkan responsivenya dalam minggu ini..
    dan kodenya saya kirim via email..
    OK :>)

    BalasHapus
    Balasan
    1. Alhamdulillah, ditunggu dan terimakasih banyak (p)

      Hapus
    2. mbak mau nanya nih..
      tapi sangat keluar dari artikel ini..
      apa mbak pengguna paypal??
      klo iya saya mau belajar cara mendapatkan status verified dari paypal
      soalnya saya juga mau lagi memulai menggunakan paypal tapi belum tau cara yg paling baik untuk mendapatkan status verified..

      Hapus
  9. Selamat, blog anda terindex di Gudang TV Directory

    http://bloggerdirektori.gudang.tv/2013/05/httpwwwtipstrikbloggingcom.html

    Happy Blogging

    BalasHapus
    Balasan
    1. Ada hadiahnya nggak? He, Makasih. Happy blogging juga mbak.

      Hapus
  10. Wow keren itu kalo dipasang di sidebar untuk background template warna cerah

    BalasHapus
  11. wah keren nih kaya win 8, saya simpan dulu scriptnya, siapa tahu nanti coba mau pasang..
    jazakillah....

    BalasHapus
  12. semua bilang Bagus ...
    Tapi aku cek di BLOG-nya ngak ada yang pasang
    Benar benar penghinaan ... Hehehehehee

    BalasHapus
    Balasan
    1. Tadi anaa hapus komentar sobat karena sungguh tak beradab, eh buat komentar baru juga masih sok tau. Kurang kerjaan apa ngecek satu2?

      Pak Gildo dari spanyol diatas pasang kok diblog personalx about indonesia.

      Hapus
    2. ini memang terlihat bagus soalnya mreka lihat demonya, jadi wajar mreka bilang sepeti itu..
      masalah untuk memasang atau tidak itu tergantung mreka, mungkin belum cocok dengan warna template mreka atau mungkin ada alasan lain..
      dan untuk sobat Kang surinder saya rasa tidak pantas berkomentar seperti itu.. :>) walaupun menurut sobat hanya bercanda. :>)
      maaf ea sblumnya..

      Hapus
    3. Assalamu'alikum,
      Benar apa yang dibilang Mas Abdul Rohman, semua bilang bagus karena memang tampilan widgetnya bagus, dan itu terbukti,
      untuk masalah pemasangan di blog, itu hak masing-masing,

      Buat Mbak Admin Amatullah Syukur sebelumnya salam kenal,
      Tetap semangat, saya tunggu postingan-postingan terbarunya
      ok.

      Hapus
    4. Ass .. kalau saya perhatikan komentar dari kang surinder , sewot banget sih hehe peace ahh

      Hapus
  13. terimakasih sobat sudah berbagi..

    happy blogwalking !!

    BalasHapus
  14. wah nice info", kunjungi balik yaa http://www.sebarin-fo.blogspot.com

    BalasHapus
  15. mantaf deh postingan nya .. kunjungan malam sobat :)

    BalasHapus
  16. Saya akui keren Mbak,apalagi selain untuk menambah share artikel ke berbagai jejaring sosial juga menjadi daya tarik tersendiri pada blog kita umumnya.

    BalasHapus
  17. wah mantap mba, saya lihat demo nya, next mungkin saya akan coba terapkan...
    terima kasih ya mba...

    BalasHapus
  18. mbak saya ada sedikit kode nih untuk menhilangkan/menyembunyikan garis pada bagian balasan komentar terakhir.
    .comments .comment-thread.inline-thread .comment:last-child::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #FFF;
    top: 11px;
    display: block;
    left: -23px;
    }

    BalasHapus
    Balasan
    1. Garis pada bagian balasan komentar terakhir? ada ya? iya nanti ana coba, terimakasih. Untuk saat ini, apalagi menjelang beberapa bln id, anaa sibuk produksi, promo dan masarkan brg sec offline dan online.

      Hapus
    2. kalau garis pd threaded comments mas satank gmn ya ?? sharenya dong :)

      Hapus
    3. Kodenya udah anaa tambahkan, terimakasih.
      Ditunggu kode selanjutnya, sebagaimana yang telah dijanjikan (Nagih ni)!

      Hapus
    4. iya, nanti saya akan kirim klo sudah selesai..

      Hapus
  19. wah keren nih :D Full color :D hehe

    BalasHapus
  20. ini bisa membantu tapi apakah efektif ?

    BalasHapus
  21. saya lihat diblog-blog tetangga banyak yang sudah menggunakan social profile widget seperti ini mbak, kapan-kapan bisa dicoba.

    BalasHapus
  22. Banyak tutorial menarik yang bisa saya dapat disini ..sekalian izin baca yang lain...

    BalasHapus
  23. wah ... sangat menarik, widgetnya elegant, tadi di cek demo nya kerennnn
    di coba dulu ah ... kunjungi ya blog baru saya
    syukron

    BalasHapus
  24. bagus tutorialnya.good work

    BalasHapus
  25. biasanya cuma 5 ya.. ini lebih komplit mbak.. cakep, letakan di sidebar keren ya :) .. entar deh kapan-kapan pake :) .

    BalasHapus
  26. greetings. thanks for the info. This was enough to help me gan
    ok do not forget to visit my blog:
    a child who longs to mother
    Information

    I like the way you describe the sharing and expression through writing this interesting article

    BalasHapus
  27. wah mantap maz ....
    makasih banget atas ilmu2 yg maz share...
    smuax bermanfa'at bagi blogger newbie kyak gue...
    jarang ada yg share tentang ilmu trick blogger apalagi trick seo,,,kbanyakan jual ebook...
    terima kasih maz o'om...semangat maz untuk berbagi ilmunya...

    BalasHapus
  28. wew keren nih tutornya..kunjungan perdana disini skalian follow

    BalasHapus
  29. wow, keren banget. jujur aja saya suka sama template Metro sama variannya. kesannya elegan :D

    BalasHapus
  30. wah keren,nanti di coba deh

    BalasHapus
  31. mantab bangd mas
    tutornya saya kan coba jadi senang berkunjung kesini

    BalasHapus
  32. krennnn
    mas ane ada requet ney Tent Sebr Google Ping Gator dari website Sosial ato Web Reviewers? itu Gmn dampaknya buat blog kita??
    thank support..!

    BalasHapus
  33. Please Ignore previous comment

    BalasHapus
  34. ada yang kurang kayaknya :-d -> href=http

    BalasHapus
  35. aku udah pake . baguuus :3 hehe
    terima kasih yaaa ^^

    BalasHapus
  36. datang untuk kunjungan di blog sobat, saat ini saya akan sedekah di blog sobat, izin klik semua iklannya gan, membalas kebaikan agan. terima kasih. sukses selalu dan mari kita jaga silaturahmi

    BalasHapus
  37. tutorialnya bagus2 banyak yang dapat saya pelajari, sangat menarik dan bermanfaat :)

    BalasHapus
  38. Wah keren nich.... senang rasanya bisa berkunjung di blog luar biasa ini. salam kenal ya sist.. Visit Our Fashion Wanita Online

    BalasHapus
  39. terimakasih nih infonya menarik dan keren...

    bravoseo.blogspot.com

    BalasHapus
  40. Dulu template dari Metro UI pernah saya pakai dengan widget sosial profil yg keren tsb tapi masih warna biru semua. Sekarang dikasih warna makin keren tampilannya.
    Oya, kok jarang muncul di G+?

    BalasHapus
  41. Widgetnya keren, saya bookmark aja dulu ya :D
    Sukses follower ke 1270, follback nya saya tunggu di www.ngeramput.com :)

    BalasHapus
  42. wah mantap tipsnya...by bisnisberbonusuang.blogspot.com

    BalasHapus
  43. Metro UI emang elegan kliatannya dan pasti lebih enak dilihat.
    Lanjutkan berkreasi sista cheer

    BalasHapus
  44. kk mau tanya, ane cek diresponsive widget ini nggak ngikutin, biar responsive bijimane caranya? cheer

    BalasHapus
  45. mantab gan,,,
    join back => luthfi107.blogspot.com

    BalasHapus
  46. makasih infonya saya coba dulu nih mbak ..

    BalasHapus
  47. Izin bukmak dulu, Om. Trims sharingnya.

    BalasHapus
  48. Wah keren sis, saya izin pasang di blog dan mosting tentang social widgetnya ya sis! :) (h) (h) (h)

    BalasHapus
  49. tampilannya bikin blog tambah kece gan

    BalasHapus
  50. makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    BalasHapus
  51. mice banget. lucu and ringan banget...

    BalasHapus
  52. bener-bener keren tu widget,
    jadi pengen deh dicoba

    BalasHapus
  53. mantapp (y) mampir juga ksni gann ,,http://sonytutorial.blogspot.com/

    BalasHapus
  54. Widget social media memang memudahkan kita untuk berbagi artikel.

    BalasHapus
  55. langsung saya pasang di blog saya .. terima kasih

    BalasHapus
  56. Mantap tutornya gan ... inzin nyoba ... :))

    BalasHapus
  57. Keren mbak widgetnya. Dah saya coba. Ditunggu kunjungan baliknya.

    BalasHapus
  58. keren widgetnya mas,, jadi pengen coba pasang :d

    BalasHapus
  59. saya coba dahulu ya mas, terima kasih atas sharingnya :D

    BalasHapus
  60. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  61. keren sob, seperti tampilan windows 8

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!