Pasang Static Slide Menu Di Blogspot

Static Slide Menu yang dimaksud seperti pada "My Side Menu" disebelah kiri (Kelihatan jika anda buka halaman artikel ini) Klik disini deh biar kelihatan. Menu akan selalu bergerak ketika anda menggulung halaman kebawah dan keatas. Jika mouse anda sorot ke menu tersebut, maka menu akan tampil (melebar) coba saja, asyik kan?.
Mau pasang di blog kamu yang blogspot? Caranya mudah, ikuti petunjuk dibawah ini:
O iya, script (kode) aslinya dibuat oleh maximus dan bisa didapatkan disini. Tapi tampilannya kurang sreg (menurut saya bahkan jelek dan katrok), dan petunjuknya lumayan ribet, selain berbahasa inggris, juga advance banget gitu loh.... Dengan beberapa kali otak-atik dan memecah kode agar mudah dipasang di blog blogspot/blogger, maka langkah pemasangan menjadi relatif mudah.
LANGKAH PERTAMA:
Download dulu file-file javascript DISINI, extract file tersebut (rar), dan upload file tersebut ke tempat penyimpanan online (server)  kamu seperti googlepages, geocities, dll.
Setelah itu copy kode dibawah ini dan paste di notepad, Edit dengan memperhatikan petunjuk selanjutnya.

<style type="text/css">
<!--
a.ssmItems:link {color:black;text-decoration:none;}
a.ssmItems:visited, a.ssmItems:active {color:black;text-decoration:none;}
a.ssmItems:hover {color:#ffff00;font-weight:bold;text-decoration:none;}
//-->
</style>

<script src="http://ateonsoft.googlepages.com/ssm.js" 
language="JavaScript1.2"></script>
<script src="http://ateonsoft.googlepages.com/ssm2.js" 
language="JavaScript1.2"></script>

<script type="text/javascript">
<!--
barText="My Side Menu"; // Ganti dengan nama menu kamu
menuBGColor="#D3D3D3"; //Warna background menu yang muncul sebagai garis
menuWidth=150; // Lebar Menu, Harus Kelipatan 10! 
menuCols=2; //Jumlah maksimal kolom menu sejajar baris
hdrFontFamily="arial"; //jenis huruf kepala menu
hdrHeight="25"; //tinggi kepala halaman
hdrFontSize="1"; //ukuran huruf kepala menu, 1 adalah ukuran normal
hdrFontColor="white"; //Warna fonts Kepala Menu.
hdrBGColor="#2C314E"; //Warna background Kepala Menu.
hdrAlign="left"; // perataan baris kepala menu, left, center, atau right
barBGColor="#2C314E"; //Warna Side Bar Menu.
barFontFamily="arial"; // Jenis huruf menu
linkAlign="left"; //perataan baris menu, left, center, atau right
linkBGColor="#f0f0f0"; //warna background menu
linkOverBGColor="#2C314E"; //warna background menu ketika disorot mouse
linkFontFamily="arial"; //jenis huruf menu

ssmItems[0]=["MENU UTAMA"] //Kepala Halaman
ssmItems[1]=["HOME", "http://www.ateonsoft.com/", ""]
ssmItems[2]=["TABLE OF CONTENTS", "http://www.ateonsoft.com/
search?max-results=150", ""]
ssmItems[3]=["KOMPUTER", "http://www.ateonsoft.com/search/label/
KOMPUTER?max-results=150",""]
ssmItems[4]=["DOWNLOAD", "http://www.ateonsoft.com/search/label/
DOWNLOAD?max-results=150",""]
ssmItems[5]=["SOFTWARE", "http://www.ateonsoft.com/search/label/
SOFTWARE?max-results=150",""]
ssmItems[6]=["EKONOMI", "http://www.ateonsoft.com/search/label/
EKONOMI?max-results=150",""]
ssmItems[7]=["KONSULTASI", "http://www.ateonsoft.com/2008/06/
media-konsultasi.html", ""]
ssmItems[8]=["INFORMASI", "http://www.ateonsoft.com/search/
label/INFORMASI?max-results=150",""]
ssmItems[9]=["LAINNYA", "http://www.ateonsoft.com/search/label/
LAINNYA?max-results=150",""]
ssmItems[10]=["ABOUT US", "http://www.ateonsoft.com/2008/
06/about-us.html", ""]

ssmItems[11]=["MENU EMAIL", "", ""] //Kepala Halaman
ssmItems[12]=["Login", "http://mail.google.com/a/ateonsoft.co.cc/", "_new", 1, "no"]
ssmItems[13]=["Dasboard", "http://partnerpage.google.com/ateonsoft.co.cc", "_new",1]
ssmItems[14]=["Daftar", "http://www.ateonsoft.com/2008/05/
mailateonsoftcocc.html", "", 1, "no"]
ssmItems[15]=["Apa Ini", "http://www.ateonsoft.com/2008/05/
mailateonsoftcocc.html", "",1]

ssmItems[16]=["External Links", "", ""] //Kepala Halaman
ssmItems[17]=["Kampung Cerita", "http://www.pondokjeruk.co.cc", "_new"] 
ssmItems[18]=["Kajian Islami", "http://www.albachrawi.co.cc", "_new"]
ssmItems[19]=["Motivasi", "http://www.kitasemua.co.cc", "_new"]
ssmItems[20]=["CSS by Ateonsoft", "http://www.ateonsoft.com/","_new"]

buildMenu();
//-->
</script>

Kode berwarna Hijau adalah pengaturan CSS untuk mengatur ukuran, warna dan lainnya yang sudah saya beri petunjuk disamping kodenya. Sebaiknya kamu otak-atik belakangan sesuai selera, yang penting adalah mengedit alamat (contoh) pada kode berwarna Biru dan Orange. Alamat berwarna Biru ganti dengan alamat kamu menyimpan file javascript yang tadi kamu download dan telah kamu upload, Sedangkan warna Orange sesuaikan dengan alamat link menu kamu, bisa ditambah dan dikurangi. Susunan penulisan alamat seperti dibawah ini:

ssmItems[...]=[name, link, target, colspan, endrow?]

• ... : No Urut Menu
• Name : nama menu
• Link : Alamat link
• Target : Alamat link menu akan dibuka di jendela baru atau dijendela yang sama.
• colspan : kolom span (untuk menentukan apakah akan dimasukkan kekolom kedua (Lihat contoh). isikan "1" untuk dua menu yang ingin tampil sejajar.
• endrow? : Apakah  baris diakhiri? ketikkan "no" jika ingin menu berikutnya tampil sejajar.

Intinya contoh kode diatas, kalau masih kesulitan.... Pelajari lagi dech, sudah habis kata-kata buat ngejelasin. Kalau boleh kasih saran, kamu lakukan dulu kalau nanti ada yang kurang sesuai bisa diedit kembali.
Untuk membuat header menu Cukup Ketikkan nama menu tanpa menyertakan link, target, colspan, dan endrow?. (Lihat contoh)

LANGKAH KEDUA:
Buka Template -----> Edit HTML -----> Jangan lupa lakukan backup template -----> kemudian beri tanda cek pada 'Expand Widget Templates'
kemudian cari kode:

</head>

Sudah ketemu ? Kalau sudah copy semua kode kamu yang sudah diedit tadi diatas kode   tadi. Simpan. Dan lihat hasilnya. Jika akan mengedit menu tadi kamu harus mengedit di Edit HTML lagi.


LANGKAH KETIGA:
Selesai, sudah tampil to menunya .... ? HAPPY BLOGGING......!