Thursday, December 6, 2007

Top Menu (2)

Mencoba untuk melengkapi trik pemakaian top menu maka akan kami bahas sedikit mengedit javascript top menu yang ada pada widget/ elemne halaman. Tulisan ini dimaksudkan untuk mempercantik top menu, biar seakan2 blog kita yang sebenarnya berbeda berada pada satu blog seperti blog punyaku ini. Maksudnya gini, jadi semacam ada efek gerakan pada top menu. Seperti pada blog ini maka menu yang berwarna hijau adalah kolom blog ini, bila kita klik beranda, maka nantinya top menu beranda yang akan berwarna hijau dan kita berada pada blog beranda.

Tentu saja ini lanjutan dari tulisan sebelumnya. Jadi kita tinggal masuk ke dashboard kita. kita buka pada Template dan pilih page element/elemen halaman. lalu edit html dimana kita meletakkan javascript top menu.

Untuk blog ini javascriptnya akan saya kasih contoh pada dua blog saya yakni nedy-nedy.blogspot.com pada beranda dan nedy-rahasia.blogspot.com pada rahasia blog.

Pada javascript di beranda seperti ini:
<!-- Please change the links with your own links -->
<div id="blue-menu2">
<div style="margin-left: 5px;">
<div id="current">
<a href="http://nedy-nedy.blogspot.com/"
title="Anda disini">Beranda </a> </div>
</div>
<a href="http://nedy-tugas-kuliah.blogspot.com/"
title="Limited Edition">Tugas Kuliah</a>
<a href="http://nedy-rahasia.blogspot.com/"
title="Melihat rahasia blog ini">Rahasia Blog </a>
<a href="mailto:hafid_umm@yahoo.com"
title="Kirim surat disini">E-mail ku </a>
<!-- you can add saveral link ini here -->
</div>
<!-- close for blue-menu2 -->

dan pada javascript di rahasia blog
<!-- Please change the links with your own links -->
<div id="blue-menu2">
<div style="margin-left: 5px;">
<a href="http://nedy-nedy.blogspot.com/"
title="Kembali ke awal">Beranda </a> </div>
<a href="http://nedy-tugas-kuliah.blogspot.com/"
title="Limited Edition">Tugas Kuliah </a>
<div id="current">
<a href="http://nedy-rahasia.blogspot.com/"
title="Melihat rahasia blog ini">Bukan rahasia
</a> </div>
<a href="mailto:hafid_umm@yahoo.com"
title="Kirim surat disini">E-mail ku </a>
<!-- you can add saveral link ini here -->
</div>
<!-- close for blue-menu2 -->

jadi yang berwarna hijau tuh untuk efek top menu berwarna hijau, sedangkan warna biru top menu yang warna biru, bedanya tuh ada kode <div id="current"> dan diakhiri </div>. Jadi itu berisi link yang berwarna hijau pada blog yang sedang dibuka. Semoga bermanfaat.

2 comments: