Membuat Menu Hubungi Saya atau Menu Slide

Sudahkah anda pernah melihat menu hubungi saya....beberapa blogger memasang menu ini sehingga blog terlihat lebih menarik. Menu ini dapat ditampilkan pada sisi kiri maupun kanan tergantung dari pengaturannya. Menu ini akan bergerak ketika anda mengscroll halaman ke bawah atau keatas. Menu ini dibuat oleh Maximus dimana nama asli menu ini adalah Dynamic Fx Slide In Menus. Dibawah ini adalah langkah-langkah untuk membuat menu ini:

1. Download scriptnya klik DISINI
2. Ekstraklah file itu dengan menggunakan WinZip, WinRAR
3. 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 seperti NotePad.

5. Isi file ssmItem.js seperti sebagai berikut ini. Kode-kode ini untuk mengatur tampilan menu hubungi saya.

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();

Untuk lebih jelasnya penjelasan dari kode diatas adalah sebagai berikut ini:

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
26. Buat menu

6. Jika sudah selesai mengedit file ssmItem.js simpan file tersebut, lalu upload-lah kedua file javascript itu ke server kamu, kamu bisa menggunakan googlepage untuk menghosting file itu
7. Kalau sudah di upload, jangan lupa untuk mengkopi alamat URL kedua file tersebut.
8. Sekarang saatnya memasukkan file java script tadi kedalam blog kita, silahkan ikuti langkah-langkah berikut ini :

9. Login ke Blogger klik Rancangan----> Edit HTML
10. Kopi dan paste kode/script berikut di atas kode </head>

<script src='http://jurus2ngeblog-blogspot.googlepages.com/ssm.js' type='text/javascript'></script><script src='http://jurus2ngeblog-blogspot.googlepages.com/ssmItems.js' type='text/javascript'></script>

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

10. Simpan dan lihat blog sobat.

Posted in: Menu,Tips dan Triks