Habis perjalanan dari kampung jenguk anak capek banget dan iseng-iseng browsing internet buat ngilangin capek eh gak taunya malah nemuin tutorial yang bagus yang ada di www.dynamicdrive.com buat di posting di blog ini biar pada banyak yang tau. Mau tau apa? Namanya Dinamix-FX-Slide-In Menu Walah apa lagi sich ini gak ngerti? Oke akan saya jelaskan dulu biar ngerti, awalnya saya sendiri juga bingung tentang Dinamix-FX-Slide-In Menu karena penasaran akhirnya saya coba otak-atik kode-kode ini eh gak taunya ini adalah menu yang selalu tersembunyi di sebelah kiri layar monitor dan yang terlihat hanyalah bar menunya saja dan apabila di sorot oleh mouse barulah menu yang ada di dalamnya muncul, asiknya lagi menu ini selalu mengikuti gerakan scroll ke atas maupun ke bawah dan selalu berada di sebelah kiri monitor. Unik ya menu ini! Sobat tertarik untuk membuatnya silahkan download dulu codenya,
klik tulisan di bawah ini:
DOWNLOAD CODE
Jika sudah sobat download, silahkan sobat ekstrak dulu menggunakan software winrar atau winzip karena file ini mempunyai extensi .zip. Setelah sobat ekstrak akan muncul dua buah file yang mempunyai nama ssm.js dan ssmltems.js selanjutnya tugas sobat meng-upload file tersebut tapi sebelum sobat upload sobat perlu meng-edit file yang bernama ssmltems.js dengan mengganti link yang ada dengan link milik sobat. Untuk mengedit file tentunya sobat semua udah pada tahu tapi buat sobat yang belum tau silahkan ikuti cara berikut ini menurut yang saya tahu, klik kanan pada file yang bernama ssmltems.js selanjutnya pilih Open With dan pilih Notepad, setelah terbuka akan muncul kode-kode seperti ini:
Sebenarnya masih banyak menu yang lain yang harus diganti kurang lebih ada 12 menu sengaja saya kurangi karena terlalu banyak dan untuk mempersingkat waktu tentunya.
Kode-kode diatas setahu saya setelah saya coba dan saya otak-atik kesana kemari sebenarnya hanyalah untuk mengatur tampilannya saja seperti besar huruf, warna huruf, warna tulisan dan background. Sebaiknya sobat pelajari sendiri aja mudah kok itung-itung sambil praktek.
Pada tulisan Main Menu, Home dan lainnya yang saya cetak tebal di atas bisa sobat ganti sesuai keinginan. Selanjutnya sobat tinggal mengupload file tersebut ke tempat penyimpanan file seperti google page creator tempat dimana saya biasa menyimpan file-file milik saya dan jangan lupa mencatat/meng-copy alamat url kedua file tersebut.
Untuk memasukkan ke dalam kode template sobat silahkan ikuti panduan berikut:
1. Login ke Blogger.com dengan id sobat.
2. Klik Tata Letak
3. Klik Edit Html
4. Copy paste kode berikut di atas kode
Kode yang saya cetak tebal silahkan di ganti dengan milik sobat yang tadi sobat upload.
5. Klik Simpan Template dan lihat hasilnya.
6. Selesai dan selamat mencoba!
klik tulisan di bawah ini:
DOWNLOAD CODE
Jika sudah sobat download, silahkan sobat ekstrak dulu menggunakan software winrar atau winzip karena file ini mempunyai extensi .zip. Setelah sobat ekstrak akan muncul dua buah file yang mempunyai nama ssm.js dan ssmltems.js selanjutnya tugas sobat meng-upload file tersebut tapi sebelum sobat upload sobat perlu meng-edit file yang bernama ssmltems.js dengan mengganti link yang ada dengan link milik sobat. Untuk mengedit file tentunya sobat semua udah pada tahu tapi buat sobat yang belum tau silahkan ikuti cara berikut ini menurut yang saya tahu, klik kanan pada file yang bernama ssmltems.js selanjutnya pilih Open With dan pilih Notepad, setelah terbuka akan muncul kode-kode seperti ini:
<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="MAIN MENU"; // <IMG> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Home", "http://mpthrelyrics.blogspot.com", ""]
ssmItems[2]=["Free Games & Aplikasi", "http://download-4u-free.blogspot.com", "_new"]
ssmItems[3]=["Submit Link", "http://bisnis-foryou.blogspot.com", "_new"]
ssmItems[4]=["Download Template", "http://www.ziddu.com/download/8406670/Blackwhitemusictemplate.zip.html", "_new"]
buildMenu();
//-->Sebenarnya masih banyak menu yang lain yang harus diganti kurang lebih ada 12 menu sengaja saya kurangi karena terlalu banyak dan untuk mempersingkat waktu tentunya.
Kode-kode diatas setahu saya setelah saya coba dan saya otak-atik kesana kemari sebenarnya hanyalah untuk mengatur tampilannya saja seperti besar huruf, warna huruf, warna tulisan dan background. Sebaiknya sobat pelajari sendiri aja mudah kok itung-itung sambil praktek.
Pada tulisan Main Menu, Home dan lainnya yang saya cetak tebal di atas bisa sobat ganti sesuai keinginan. Selanjutnya sobat tinggal mengupload file tersebut ke tempat penyimpanan file seperti google page creator tempat dimana saya biasa menyimpan file-file milik saya dan jangan lupa mencatat/meng-copy alamat url kedua file tersebut.
Untuk memasukkan ke dalam kode template sobat silahkan ikuti panduan berikut:
1. Login ke Blogger.com dengan id sobat.
2. Klik Tata Letak
3. Klik Edit Html
4. Copy paste kode berikut di atas kode
</head><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://sites.google.com/site/myscriptku/script/ssm.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="http://sites.google.com/site/myscriptku/script/ssmItems.js" language="JavaScript1.2">
</SCRIPT>Kode yang saya cetak tebal silahkan di ganti dengan milik sobat yang tadi sobat upload.
5. Klik Simpan Template dan lihat hasilnya.
6. Selesai dan selamat mencoba!
0 Komentar untuk "Dinamix-FX-Slide-In Menu"