Membuat Top Menu di Blogger

Membuat Top menu seperti yang saya pake!... hehehe berdasar ajaran temenQ dan ilmu dari internet sendiri pertama2untuk membuat top menu seperti pada blog ini, pergilah kesini kolom tutorial. Disana akhirnya aku belajar membuat Top Menu. Aku pilih aja horisontal blue menu (Edisi lebih komplitnya coba ke dinamic drive aja). Aku ambil code html di situ, sesuai dengan petunjuk guru Rahman, dipaste pada edit html template. Cara satunya lagi dipaste di edit elemen halaman (widget html).Ini adalah langkah pertama...... click read more...untuk lengkapnya


TRus Kemudian buatlah blog lebih dari satu.Blog-blog baru itulah yang mengisi setiap kolom pada menu bar. Tapi cara buatnya yang utama dulu. perubahan pada html pembuat menu bar ada pada jaraknya dengan tepi.

Ukuran yang awalnya "margin-left: 100px", kuubah menjadi "margin-left: 5px". karena menyesuaikan dengan templateku, kalo 100px jadi aneh.
Jangan lupa pada bagian dimana kita menaruh menu bar itu harus menjadi warna hijau pada background menu barnya, setelah kita mantap dengan susunan/model template dengan top menu itu, yup langsung kita download template kita di komputer.

Untuk apa? ya hasil download tadi kita pake sebagai template blog kita yg lain, sehingga tampilan blog kita "seakan-akan" dalam satu blog. Benar? padahal kalo kita liat pada addresbar, alamatnya beda kan di tiap kolomnya? he5.

Yap, tetapi untuk widget tetep nambah secara manual, paling tidak kita ngak melakukan penaruhanmantra html lagi pada edit html template, tinggal pada elemn halaman saja, kan templatenya udah hasil download dari template blog pertama? jadi sebelum mendesain blog yg lain sebagai menu dari top menu, mantapkan dulu bentuk dari template secara keseluruhan pada blog yg pertama.

Setelah itu langkah kedua
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 rarven-darkside.blogspot.com pada HOME dan rarven-hiburan.blogspot.com pada rahasia blog.

Pada javascript di Home 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://rarven-darkside.blogspot.com/"
title="Anda disini">Home </a> </div>
</div>
<a href="http://rarven-belajar.blogspot.com/"
title="Limited Edition">Belajar</a>
<a href="http://rarven-hiburan.blogspot.com/"
title="Melihat rahasia blog ini">Hiburan</a>
<a href="mailto:rarven_darkside@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 entertainment
<!-- Please change the links with your own links -->
<div id="blue-menu2">
<div style="margin-left: 5px;">
<a href="http://rarven-darkside.blogspot.com/"
title="Kembali ke awal">Home</a> </div>
<a href="http://rarven-belajar.blogspot.com/"
title="Limited Edition">belajar </a>
<div id="current">
<a href="http://rarven-hiburan.blogspot.com/"
title="Melihat rahasia blog ini">Anime
</a> </div>
<a href="mailto:rarven_darkside@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

dan diakhiri

. Jadi itu berisi link yang berwarna hijau pada blog yang sedang dibuka. Semoga bermanfaat.
Referensi ini saya ambil dari blog temenQ