SIDE BAR MENU

Kembali lagi dengan si BeBeN si bloglang sejati dari tanah pasundan yang banyak ceweknya yang bohay-bohay Booo!!! Yang kalau jalan bagian dashboardnya lenggak-lenggok kayak ular kobra...wakakakakkkk. Tahu slide menu yang keberadaannya selalu ada disisi kiri atau kanan monitor??? Oke deh ini contoh-contohnya

1. Slide-In Menu Bar I.
Lihat pada bagian kiri monitor sobat.
2. Fold-out external menu.
Masih lihat ke bagian kiri monitor.
3. Omni Slide Menu.
Lihat di bagian kiri, atas dan kanan monitor sobat...wekekekekkkk.
4. Dynamic-FX Slide-In Menu (v 6.5).
Ini mah masih di kiri, lihat!!!.
5. Slide-In Links.
Ini berupa tulisan, dan adanya di kiri juga. Simpel dan keyen.

Silahkan kunjungi link yang sudah aku kasih itu jika ada yang tertarik dengan slide menu bikinan dynamicDrive yang edan banget. Nah sekarang tujuan aku bikin postingan ini!!! Lihat demonya disini Ben-Tools, lihat pada bagian pojok kiri atas (dekat header). Tertarik!!!

Kenapa aku memilih slide menu yang ini??? Karena eh karena, custome (terserah kita) mau diapa-apain jujah. Oke langsung saja pada caranya gimana.
Dapatkan terlebih dahulu scriptnya dengan memasuki link berikut Mulai Floating Sidebar Menu. Setelah masuk ke web tersebut, isilah sesuai dengan keperluan sobat blogger. Oke pada gambar berikut, tunggu beres loading blog aku soalnya ini trik lightbox.

Kolom Tab Caption isi dengan nama menu (terserah). Kolom Initial State, ini yang harus tahu nih. Disana ada dua pilihan :

1. Initially Collapsed.
Kalau kawan memilih yang ini artinya menu side bar ini akan tertutup keadaannya ketika memasuki halaman web/blog kawan. Contohnya yaa kayak yang di blog ben-tools itu Bos.
2. Initially Expanded
Kalau sobat memilih yang ini berarti, side bar menu akan terbuka lebar ketika memasuki web/blog sobat.

Pasti akan memilih yang nomor satu deh...wekekekekkk. Default script yang didapatkan dari web tersebut.

<!-- flooble sidebar menu start -->
<script language="javascript">
// Floating Sidebar Menu Script from Flooble.com
// For more information, visit
// http://www.flooble.com/scripts/sidebar.php
// Copyright 2003 Animus Pactum Consulting inc.
//---------------------------------------------------------
var ie = false;
var open = true;
var oldwidth = -1;
if (document.all) { ie = true; }

function getObj(id) {
if (ie) { return document.all[id]; }
else { return document.getElementById(id); }
}

function toggleSidebar() {
var sidebar = getObj('sidebarcontents');
var menu = getObj('sidebarmenu');
var arrow = getObj('sidearrow');
if (open) {
var sidec = getObj('sidebar');
var h = sidec.scrollHeight;
if (oldwidth < 0) {
oldwidth = sidebar.scrollWidth;
}
sidebar.style.display = 'none';
td = getObj('sidebartd');
td.style.width = 0;
arrow.innerHTML = '>';
//alert(h + ' - ' + sidec.scrollHeight);
sidec.style.height = h;
open = false;
} else {
sidebar.style.display = 'block';
sidebar.style.width = oldwidth;
arrow.innerHTML = '<';
open = true;
}
getObj('focuser').focus();

}

function setSidebarTop() {
//alert('hoy');
var sidec = getObj('sidebar');
sidec.style.top = 10 + document.body.scrollTop;
setTimeout('setSidebarTop()', 10);
}

setTimeout('setSidebarTop();', 2000);

</script>


<table border="0" cellspacing="0" cellpadding="3" id="sidebar" bgcolor="#FFFFFF"
style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; position:absolute; z-index:100; left:0px; top:10px; font-family:Verdana;">
<tr>
<td valign="top" id="sidebartd">
<div id="sidebarcontents" style="padding: 5px;">

<A HREF="/" TARGET="_BLANK"><B>Flooble.com</B></A>
<LI><A HREF="/perplexus/" TARGET="_BLANK">Logic Puzzles</A>
<LI><A HREF="/fun/" TARGET="_BLANK">Fun Stuff</A>
<LI><B>Web Scripts</B>
<LI><A HREF="http://chater.flooble.com/" TARGET="_BLANK">Free Chatterbox</A>
<LI><A HREF="http://webster.flooble.com/" TARGET="_BLANK">Make Money with a Site</A>
<P>
As many more links as you need.
</div>
</td>
<td valign="top" align="center" bgcolor="#000000" id="menucontainer">
<a href="javascript:void(0);" id="sidebarmenu" onClick="toggleSidebar();"
style="color:#FFFFFF; text-decoration:none;font-weight:bold; font-family:Helvetica;"><span
id="sidearrow">&lt;</span><br>M<BR>y<BR> <BR>M<BR>e<BR>n<BR>u</a><br>
<a href="javascript:void(0);" style="color: #000000; heigh:1px;"
id="focuser"> </a>
</td>
</tr>
</table><SCRIPT LANGUAGE="Javascript">toggleSidebar();</SCRIPT>
<noscript><a href="http://www.flooble.com/scripts/sidebar.php>free javascript sidebar menu by flooble</a> | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
</noscript>
<!-- flooble sidebar menu end -->

Letakkan script (tulisan yang berwarna biru) dibawah atau setelah kode <HEAD> Nah kalau ada error dengan scriptnya, harap sobat prase terlebih dahulu script tersebut di Centricle Prase.

Untuk script/kode (tulisan yang berwarna kuning tai) masukkan didalam tag
<BODY>

.......


</BODY>
Usahakan memasukkan kodenya, jangan didalam sebuah tag <DIV>. Usahakan cari di penutup kode tag </DIV>, dan letakkan sesudahnya. Hmmm...kode bawaan yang berwarna kuning tersebut default hasil web ada beberapa tag yang tidak terkunci. Perhatikan pada bagian tag <LI>, tambahkanlah tag penutup bagi kode tersebut dengan menambahkan </LI> disetiap kode tag <LI> tadi yang bawaan webnya.

Ada juga tag <P> pada default kode dan tag <BR>, tambahkanlah garis miring disetiap masing-masing kode tersebut. <P> ----> <P/> dan <BR> ----> <BR/>.

<table border="0" cellspacing="0" cellpadding="3" id="sidebar" bgcolor="#FFFFFF"
style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; position:absolute; z-index:100; left:0px; top:10px; font-family:Verdana;">
<tr>
<td valign="top" id="sidebartd">
<div id="sidebarcontents" style="padding: 5px;">

<A HREF="/" TARGET="_BLANK"><B>Flooble.com</B></A>
<LI><A HREF="/perplexus/" TARGET="_BLANK">Logic Puzzles</A></LI>
<LI><A HREF="/fun/" TARGET="_BLANK">Fun Stuff</A></LI>
<LI><B>Web Scripts</B></LI>
<LI><A HREF="http://chater.flooble.com/" TARGET="_BLANK">Free Chatterbox</A></LI>
<LI><A HREF="http://webster.flooble.com/" TARGET="_BLANK">Make Money with a Site</A></LI>
<P/>
As many more links as you need.
</div>
</td>
<td valign="top" align="center" bgcolor="#000000" id="menucontainer">
<a href="javascript:void(0);" id="sidebarmenu" onClick="toggleSidebar();"
style="color:#FFFFFF; text-decoration:none;font-weight:bold; font-family:Helvetica;"><span
id="sidearrow">&lt;</span><br/>M<BR>y<BR/> <BR/>M<BR/>e<BR/>n<BR/>u</a><br/>
<a href="javascript:void(0);" style="color: #000000; heigh:1px;"
id="focuser"> </a>
</td>
</tr>
</table><SCRIPT LANGUAGE="Javascript">toggleSidebar();</SCRIPT>
<noscript><a href="http://www.flooble.com/scripts/sidebar.php>free javascript sidebar menu by flooble</a> | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
</noscript>
<!-- flooble sidebar menu end -->

Selamat berjuang dan semoga berhasil...WassaLam...Prikitiiiwww!!!

UPDATE : Letakkan semua script dan kode dengan melakukan Add a Gadget, pada halaman Page Elements.

Maaf untuk kesalah penanaman script di tag <HEAD>, pokoknya script ama kode² yang lainnya masukkan pada Add a Gadget pilih yang HTML/Javascript