Kamis, 29 Desember 2011

[TUTORIAL] Cara Membuat Social Network Button di Header

Heyho

Wah banyak sekali yang mempeributkan Tentang Social Network Button di Header. Ada yang bilang pake Dreamweaver, tapi ribet musti Download. Nah postingan gue kali ini Tentang Cara Membuat Social Network Button di Header dengan SIMPLE. SIMPLE ? Tentu, tanpa download aplikasi lho. Ane dapet ini Tutorial dari Bang Ucup Pello, Berhubung masih banyak yang bingung ane sempurnain ya Bang.. Mau tau caranya ?



Okey, Sebelumnya kalian Mesti cari atau Punya Icon-Icon Social Network. Bisa lo Bikin sendiri, Ambil di Google, atau Refrensi dari gue. Berikut Link-link yang menyediakan Icon Social Network
- Icon Archive
- Free Icons Web
- Free Icons Download
Ukuran nya ada yang gede noh, Tinggal kalian Re-Size aja Pake Photoshop, Photoscape, dll. Icon Udah siap \(^o^)/

Next, Selanjutnya Login Blogger Kalian. Udah pada tau kan Cara Log-in begimane. Kalo udah Masuk ke: Rancangan - Terus Pilih Edit Html. Kalo takut Gagal, Centang Expand Widget Templates Terus Klik download Templates Selengkapnya terus Save.

Lanjut, Cari Kode </header> di Laman Edit HTML tadi. Cara mudah nya Teken CTRL+F di Browser Kalian terus Tulis deh </header>.
Udah Ketemu ?  Paste Kode ini TEPAT di bawah Kode </header>.

<div class='button-widget'><a class='postlink' href='LINK DITUJU-1' target='_blank'><img alt='' border='0' src='URL GAMBAR/ICON-1.JPG'/></a>

<a class='postlink' href='LINK DITUJU-2' target='_blank'><img alt='' border='0' src='URL GAMBAR/ICON-2.JPG'/></a>

<a class='postlink' href='LINK DITUJU-3' target='_blank'><img alt='' border='0' src='URL GAMBAR/ICON-3.JPG'/></a>

</div>

Keterangan Nya:

LINK DITUJU-1 = alamat URL Gambar pertama yang akan di tuju ketika di klik. Misal Facebook, Isi sama www.facebook.com/xxx
LINK DITUJU-2 = alamat URL Gambar kedua yang akan di tuju ketika di klik. Misal Twitter, Isi Sama www.twitter.com/xxx
LINK DITUJU-3 = alamat URL Gambar ketiga yang akan di tuju ketika di klik. Misal G+, Isi sama www.plus.google.com/xxxx
BLANK : kode ketika di klik maka akan membuka tab baru, jika ingin tetap di halaman tersebut kamu bisa ganti menjadi "parent" .
URL GAMBAR/ICON-1.JPG : Alamat URL gambar/icon pertama. Misal www.sontoloyo.com/nghue.jpg
URL GAMBAR/ICON-1.JPG : Alamat URL gambar/icon kedua. Misal www.sontoloyo.com/nghue.jpg
URL GAMBAR/ICON-1.JPG : Alamat URL gambar/icon ketiga. Misal www.sontoloyo.com/nghue.jpg

Untuk upload gambar, Gambar bisa di Upload di Imageshack.us, tinypic.com, Atau Langsung Dari Blogspot, Caranya ya Buat Entri Baru -> Upload Foto -> Klik kanan Foto -> Open Image in New Tab -> Copy LINK. Icon bisa lebih dari 3 Kok, Cara nambahin nya Masukkan kode Yang sama di atas (Kode yang Sebelum </header>  terus pastein Di bawh URL Gambar 3 dan Sebelum tag </div>

Next, Cari Kode:
.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}
Cara cepat Gunakan CTRL+F lagi ya ! 


Terus Copy Paste Kode di bawah ini sebelum Kode Di atas (Yang .header-inner)

.button-widget {
float:right;
border:0;
margin-right:465px;
margin-top:-258px;
height:60px;
width:308px;
}

.button-widget a img {
border:none;
}

.button-widget a:hover img {
border:none;
opacity:0.9;
filter:alpha(opacity=80);
-moz-opacity:0.90;
-khtml-opacity:0.9;
}

Setelah itu coba Klik Tombol "Preview" dan liat hasilnya. Kalau Posisi tidak sesuai Keinginan, Kreasikan Sendiri ya. dan

Berikut Keterangannya :
float:right; = Posisi float gambar tersebut right=kanan dan left=kiri , sesuaikan sesuka Kalian.
margin-right:465px; = Atur posisi kesamping/kanan icon dengan mengganti ukuran pixel tersebut. lakukan sambil di preview untuk hasil yg cepat dan memuaskan. Misalnya Perubahan dari 465px ke 365px, Jika sudah di ganti maka di Preview ya :)
margin-top:-258px; = Atur posisi keatas icon dengan mengganti ukuran pixel tersebut.. lakukan sambil di preview untuk hasil yg cepat dan memuaskan.Misalnya Perubahan dari -258px ke -365px, Jika sudah di ganti maka di Preview ya :)
height:60px; = Atur tinggi icon yang kamu pasang
width:308px; = Atur lebar icon yang kamu pasang (semakin banyak icon seharusnya semakin besar ukuran pixel)
opacity:0.9;
filter:alpha(opacity=80);
-moz-opacity:0.90;
-khtml-opacity:0.9;
Kode diatas yg berwarna Kuning ke Orange-Orange-an adalah bagian hover. Jika Kalian ingin tampilan seperti bena maka tambah kan bagian opacity menjadi 1.0.

Tada.. Klik Preview Jika Sudah memuaskan Tinggal Save deh Template nya.
Thanks for reading, Guys. Thanks to Bang Ucup Pello, Sorry bang kalo ada yang Copas (Code nya Copas semua).

Wassalam

35 komentar:

  1. widiiihh.. tutorialnya kece bang . tengkyu bang alga. kapan2 boleh deh dipraktekin B)

    BalasHapus
  2. wohoho gampang ye ternyata, gak usah pake dreamweaver. kapan2 coba ah~
    bagus nih tutorialnya :D

    BalasHapus
  3. Kurangnya kl kayak gini di letaknya kali ya? Kalo pake DW kan gampang, tinggal di select di bagian yg mau dikasih link. But nice info. Bookmark dulu :D

    BalasHapus
  4. ,ancep, kapan-kapan gua cicipin ieh di blog gua bang ...

    BalasHapus
  5. Hooohh... Baru tau aku..
    Thankx for sharing, ya ^______^

    BalasHapus
  6. Butuh banget.. bagus nih! thanks2 :D

    BalasHapus
  7. wew :) baru tau aku~
    thanks udah sharing ^^ bisa dicoba kapan kapan nih~

    BalasHapus
  8. wohooooooo ok bgt nih,,,boleh deh dicoba :3

    BalasHapus
  9. menurut gue sih lebih ribet... lebih enak pake dreamweaver... mueheheheh

    BalasHapus
  10. @dika: Thank U ! Ayo di coba =P
    @beby: iya cuma kopas kode doang kok =).
    @Upi: thanks =)
    @aulia: iya cuma masalah tempat, pake DW download nya lama =)
    @Fathan: Thanks =)
    @Mukinin: Thanks, Yuks di praktiin
    @Fibi: hehe ayo di coba mba'
    @Retno: hehe thanks.
    @selvi: thanks, ayo dicoba sekarang :))
    @outbound: thank's gan =)
    @Ca Ya: Yuk buruan =)
    @Rian: Ribet sih ngga cuma kopas doang, kalo emang dibaca teliti gak ribet =). DW banyak yang males download, file nya gede :D

    BalasHapus
  11. Keren bang, ntar kapan2 aku cobain, bookmark dulu nih ~(^_^)~

    BalasHapus
  12. mantap nih tutorialnya. book mark dulu ah~ makasih bang :D

    BalasHapus
  13. salam gan ...
    menghadiahkan Pujian kepada orang di sekitar adalah awal investasi Kebahagiaan Anda...
    di tunggu kunjungan balik.nya gan !

    BalasHapus
  14. tutorial yang bermanfaat, langsung praktek :D

    BalasHapus
  15. nyari nyari kode sama .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    } ngga ada bro... gimana nih?

    BalasHapus
    Balasan
    1. Gan Tenshi coba ketik Ctrl+F di dalam kotak template lalu ketik header-inner → enter

      Hapus
  16. keren, thanks ya! ohya, jangan sungkan mampir ke blog saya ^^
    hanadynta.blogspot.com

    BalasHapus
  17. Ini dia tutorial yang aku cari-cari.
    makasih udah bikin tutorialnya :D

    BalasHapus
  18. thanks gan ilmunya. salam kenal

    BalasHapus
  19. terima kasih gan sharingnya. bermanffat banget. semoga banyak pahalanya

    BalasHapus
  20. Makasih tutornya Mantap, saya coba dulu nanti lapor lagi..

    BalasHapus
  21. http://babershopclipper.blogspot.co.id/

    BalasHapus
  22. http://babershopclipper.blogspot.co.id/

    BalasHapus