Selasa, 03 Maret 2009

SIDE MENU SEDERHANA

Okey sahabat semua... kali ini saya akan posting sebuah hasil dari jalan-jalan saya ke dynamicdrive dimana disana banyak sekali kode-kode javascript yang tersedia dengan gratis alias cuma-cuma, tapi anda semua jangan menyangka kalau saya hanya melakukan "COPAST" alias Copy Paste pada setiap postingan saya pada blog ini, karena bagaimanapun juga semua hasil bacaan, referensi, dan "ilmu" yang saya dapatkan, pasti akan saya uji terlebih dahulu! dan bilamana ilmu tersebut dirasa masih kurang efektif, maka akan saya lakukan editing alias di SADUR agar bisa dipergunakan dengan se-efisien dan se-efektif mungkin pada blog !
Dan ini salah satunya, yaitu membuat SIDE MENU yang tergantung statis pada samping kiri blog anda.

Karena ilmu ini akan sedikit memakan waktu, ada baiknya anda siapkan, Kopi atau teh manis minumdengan rokok satu bungkus agar bisa lebih konsen dan cermat okay ? bagi yang tidak merokok ya makan permen aja ya ?
Ocre.... langsung saja!! silahkan anda masuk account blogger anda==>Dashboard/dasbor==> Layout/tataletak==> Edit HTML, jangan lupa centang "EXPAND TEMPLATE WIDGET"
dan lakukan backup dengan cara "Download template lengkap"

Trus Copy kode dibawah ini :

<!--
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor="#ff0000";
menuIsStatic="yes";
menuWidth=150; // HARUS KELIPATAN 10 COY !!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#ff0000";
hdrAlign="center";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="courier new";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="";
linkTarget="_new";
linkAlign="Left";
barBGColor="";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20;
barText="otherside";



ssmItems[0]=["JERUKLEGI"] //NAMA HEADER 1
ssmItems[1]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[2]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[3]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[4]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[5]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[6]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]

ssmItems[7]=["FAQ", "http://NAMABLOGANDA.com/faqs.htm", "", 1, "no"] //Disini dibuat dua kolom
ssmItems[8]=["Email", "http://www.pojokjerulegi.blogspot.com", "",1]

ssmItems[9]=["SEMENDHEH", "", ""] //NAMA HEADER 2
ssmItems[10]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[11]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]
ssmItems[12]=["..::JERUKLEGI SEMENDHEH::..", "http://pojokjeruklegi.blogspot.com", "_new"]

buildMenu();

//-->


Nah setelah anda Copy, silahkan anda paste pada "NOTEPAD"atau "WORDPAD" dan lakukan editing agar nantinya menu yang akan ditampilkan pada blog anda akan sesuai dengan selera anda semua okaaaayyyyy ???

  • Warna Biru : silahkan diganti dengan tulisan yang akan di tampilkan pada menu
  • Warna Merah : Target/alamat yang di maksud.

Untuk komposisi warna silahkan anda utak-atik sendiri dengan bereksperimen ya ? dan saya yakin anda semua pasti bisa.

Nah.. setelah anda meng-copy dan telah melakukan editing sesuai dengan yang di harapkan, silahkan anda save file tersebut dengan nama : "ssmItems.js" tanpa tanda petik!!
Lalu upload file ssmItem.js tersebut ke webhosting anda untuk di ambil URL-nya!!
Nah, setelah kalian mendapatkan URL nya ingat2 tuch!!
Nah alamat URL inilah yang akan anda pergunakan sebagai pelengkap kode dibawah ini.

Copy KODE II dibawah ini :

<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://www.geocities.com/andreas.fafandreo/asu.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="URLssmItems.jsANDA" language="JavaScript1.2"></SCRIPT>

Setelah anda Copy, kemudian anda paste tepat di bawah kode :

<head>

pada halaman edit HTML yang masih tercentang EXPAND TEMPLATE WIDGET itu !

Hint :
Warna merah silahkan anda ganti dengan URL ssmItem.js anda tadi.
Mohon jangan mengurangi spasi (karena ada kode tersembunyi pada script diatas).

Baru sekarang anda bisa tekan tombol save/simpan perubahan !!
Dan lihat hasilnya !!
Jika masih terdapat pesan ERROR, itu berarti anda harus mem-PARSE semua KODE II diatas !!
Cara parse pernah saya posting disini atau anda bisa langsung menuju website tempat PARSE dengan klik disini.
Kemudian baru anda pastekan kode hasil PARSE tersebut pada lokasi yang tetap yaitu di bawah kode :

<head>

Baru kalian boleh klik tombol save/simpan perubahan !! dan sekarang kayaknya sudah ga ada masalah lagi tuch.. !! dan hasilnya,bisa kalian bisa lihat pada blog anda ocre ?
Selamat mencoba, karena saya juga sudah lelah buat posting yang satu ini... panjang banget.. !!
penat

4 komentar:

  1. wiiiih canggih banget nih blog, saya syalut ma mas..bisa buat blog kayak ini...
    mas, bantuin saya dong gimana mengedit blog saya..
    lam kenal...
    perkenalkan blog saya yang suaaangat sederhana ini,
    bonusptcku.blogspot.com

    BalasHapus
  2. Ngga ada contohnya???

    coz ngga tau ap yg dimaksud medu side....

    Makasihh

    BalasHapus
  3. boleh jg ni tipsnya .... thanks ya
    tak tunggu ya di blog aku http://mas-rahmat.blogspot.com/

    BalasHapus

Silahkan tulis disini dengan santai dan tertawa2 !!