25 Mei 2008

Membuat Top Menu

Kalau kita mau membuat top menu , tentunya kita harus memiliki lebih dari satu blok dalam satu account dengan template / tampilan yang sama, biar kesannya itu masih dalam satu blog (tampilan) padahal kalo kita liat pada addresbar, alamatnya beda.

Sebelumnya kita selesaikan dulu untuk tampilan salah satu blog kita. Jika tampilan atau templatenya sudah sesuai dengan keinginan kita, kita masuk ke edit html pada layoutnya lalu down load untuk kita upload ke blog kita yang lainnya.


Nah, langkah selanjutnya kita otak-atik javascript top menu di widget / elemen halaman (biar top menunya cantik, seakan-akan ada efek gerakan pada top menu). Kalau di blogku ini, yang berwana biru adalah bagian dari blog ni, bila kita klik Home maka nantinya top menu Home yang akan berwarna biru dan kita berada pada blog Home (coba klik top menu Ngeblog dan perhatikan berbedaan warnanya).

Jadi, kita masuk ke dashboard, buka Template dan pilih elemen halaman dan pilih edit html (yang akan kita pasang javascript top menu.

Contoh javascriptnya dari blogku aja ya dewi-biru.blogspot.com pada Home dan dewi-belajar.blogspot.com pada Ngeblog.

Pada javascript di Home seperti ini:

<div id="tabsF"> <!-- tabsF begin -->

<ul>
<!-- Change the links with your own links -->
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="http://sastradewa.blogspot.com/"><span>Sastra</span></a></li>
<li><a href="http://teaterproses.blogspot.com/"><span>Teater</span></a></li>
<li><a href="http://rahasiadulu.blogspot.com/?id=rohman"><span>Rahasia</span></a></li>
<li><a href="http://dewi-belajar.blogspot.com/"><span>Ngeblog</span></a>
</li></ul>
</div><!-- tabsF end -->

dan pada javascript di Ngeblog seperti ini :

<div id="tabsF"> <!-- tabsF begin -->
<ul>
<!-- Change the links with your own links -->

<li><a href="http://dewi-biru.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://sastradewa.blogspot.com/"><span>Sastra</span></a></li>
<li><a href="http://teaterproses.blogspot.com/"><span>Teater</span></a></li>
<li><a href="http://rahasiadulu.blogspot.com/?id=rohman"><span>Rahasia</span></a></li>
<li id="current"><a href="#"><span>Ngeblog</span></a></li>
</ul>
</div><!-- tabsF end -->

Jadi yang berwarna biru itu untuk efek top menu berwarna biru, sedangkan warna hijau top menu yang warna putih, bedanya itu pada kode <div id="current"> dan di akhiri dengan kode </div>. Jadi itu berisi link yang berwarna biru pada blog yang sedang dibuka. Semoga bermanfaat bagi kita semua. Amiiin…

Tidak ada komentar: