Membuat Social Network Button di Header

Assalamualaikum, kali ini saya akan berbagi tips untuk membuat "Social Network Button di Header Social Network Button di Header " agar blog bisa terlihat semakin keren dan pastinya juga akan ringan, langsung saja caranya :
  • Siapkan Icon Social Network dapat di ambil di ICONARCHIVE
  • Login ke blogger
  • Template > Edit HTML
  • Cari Kode </header> (gunakan CTR+F biar gampang)
  • Masukkan kode dibawah 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>
  • Cari Kode 
.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}
  •  Masukkan kode dibawah ini tepat di atas kode .header-inner .Header .descriptionwrapper {
      padding: 0 $(header.padding);
    } tadi.

.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.
    jika dirasa sudah memuaskan klik Simpan.
Mudah kan?
Sekian, Wassalamualaikum.

CONVERSATION

2 komentar:

Silahkan berkomentar sesuai kesan anda, tetapi jangan tinggalkan norma-norma kesopanan. Syukron