Cara Membuat Menu "Hubungi Saya"

Cara Membuat Menu "Hubungi Saya"

Mau tau cara bikin menu "Hubungi Saya" Seperti yang ada di samping kiri blog ini, sebelum memulainya saya akan jelaskan terlebih dahulu tentang menu ini. Pencipta Menu ini Bernama MaXimus nama asli menu ini "Dynamic-FX Slide-In Menu (v 6.5)" original source code serta contoh dari menu tersebut bisa anda lihat di dynamicdrive.com Tapi hanya untuk menampilkan Link. Disini saya menggantinya dengan gambar, yang pastinya lebih memberikan informasi bagi pengunjung blog kamu.

Silahkan download dahulu source code yang nanti akan anda pakai

Klik Disini untuk Mendownload Source Code Menu Hubungi Saya

Sudah?, Ekstraklah file itu dengan menggunakan Software Zip,7zip,atau lainnya

setelah di ekstrak, akan menghasilkan dua file (ssm.js & ssmItems.js) yang akan kita edit hanya file ssmItem.js saja, buka file itu dengan menggunakan program teks editor tidak harus yang bagus-bagus NotePad saja sudah cukup.



Untuk Memulai mensetting menu ikuti langkah berikut:


1.Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad.

2.Isi file ssmItem.js adalah sebagai berikut:

YOffset=200;
XOffset=0;
staticYOffset=150;
slideSpeed=20
waitTime=100;
menuBGColor="#d1d8ec";
menuIsStatic="yes";
menuWidth=180;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="300";
barBGColor="#86629f";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="center";
barWidth=15;
barText="Hubungi saya";
ssmItems[0]=["<center><img src=http://domain.com/gambarfoto.jpg><br>kata-kata-kamu<br><img src=http://domain.com/gambaremail.jpg> "]

buildMenu();

Kode-kode diatas adalah untuk mengatur tampilan menu hubungi saya,untuk lebih jelasnya baca baik-baik penjelasan berikut ini:

Baris
00.mengatur posisi menu pada baris y axis layar monitor (vertical)
01.mengatur posisi menu pada x axis layar monitor (horizontal)
02.untuk mengatur posisi vertical menu, pada layar monitor
03.kecepatan slide
04.waktu tunggu lamanya menu muncul setelah mouse menjauhi menu
05.untuk mengatur warna background menu, gunakan kolor picker dibawah posting ini untuk melihat kodenya
06.untuk men-set apakah menu harus tetap statis pada layar
07.Mengatur lebar menu. Harus kelipatan dari angka 10! Tanpa tanda kutip
08.jumlah kolom
09.jenis huruf header
10.ukuran huruf header
11.warna teks header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
12.warna backround header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
13.perataan teks header
14.perataan teks vertikal header
15.tinggi header
16.warna background bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
17.jenis huruf bar
18.ukuran huruf bar
19.warna huruf bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
20.perataan teks bar secara vertikal
21.lebar bar
22.kata2 yang akan muncul pada bar (hubungi saya)
23/24. ganti http://domain.com/gambarfoto.jpg dan http://domain.com/gambaremail.jpg dengan url dimana kamu upload gambar foto dan gambar email.dan jangan lupa ganti kata-kata-kamu dengan yang kamu inginkan seperti "Jika Ada Pertanyaan silahkan kirim email ke" (kok kata2nya gitu) karena dibawah kata2 tersebut akan muncul gambar alamat email kamu.
26.buat menu

Note:agar gambar foto terlihat pas, saya sarankan resolusi foto berukuran 173X244 pixels, jika anda sudah mahir dengan kode-kode diatas anda bisa ganti dengan sesuka anda,ukuran menu, kecepatan, pesan2,gambar,/terserah anda,biarkanlah diri anda bekreasi lebih jauh.

jika sudah selesai mengedit file ssmItem.js simpan file tersebut, lalu upload-lah kedua file javascript itu ke server kamu, kamu bisa menggunakan googlepage atau 000webhost untuk menghosting file itu

Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.

Sekarang saatnya memasukkan file java script tadi kedalam blog kita, silahkan ikuti langkah-langkah berikut ini :
1. Login ke Blogger klik Layout/Tata Letak ----> Edit HTML
2. Cari Kode <body> Kalo dah Ketemu CopyPaste kode/Script berikut di atas kode </head>

<script src='http://agungosx.googlepages.com/ssm.js' type='text/javascript'></script>

<script src='http://agungosx.googlepages.com/ssmItems.js' type='text/javascript'></script>

Silahkan ganti teks berwarna ungu dengan url dimana kamu upload file javascript-nya

3. Simpan dan lihat blog kamu.

Posted in: tips-tips edit blog