Bagaimana Menambahkan Menu Opera.com

Pernah mengunjungi Opera.com? Kalau sekarang kita mengunjunginya pasti kita dapat melihat menu navigasi opera yang keren terdiri dari panduan hitam dan merah. Dan tentu saja, pos kali ini akan mengajar kamu bagaimana cara menambahkannya. Terima kasih untuk Lord Html yang menyebarkan widget ini.

Lihat Contoh Widget>>

Fitur dari menu Opera

• Desain yang simpel
• Menggunakan CSS3
• Tidak menggunakan gambar
• Tidak menggunakan javascript
• 10 warna
• 2 gaya (terang & gelap)
• Dapat bekerja dengan IE 8+

Menambahkannya ke dalam blogger

Langkah 1. Pergi ke Dasbor blogger > Tata letak > Tambahkan gadget.

Langkah 2. Pada pop-up window yang muncul pilih widget "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:

<link href="http://gemar-html.googlecode.com/svn/svn/trunk/css/menu-opera.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<ul>
<li><a href='#Link 1'><span>Menu 1</span></a></li>
<li class='has-sub'><a href='#Link 2'><span>Menu 2</span></a>
<ul>
<li class='has-sub'><a href='#Link 2.1'><span>Menu 2.1</span></a>
<ul>
<li><a href='#Link 2.1.1'><span>Menu 2.1.1</span></a></li>
<li><a href='#Link 2.1.2'><span>Menu 2.1.2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#Link 2.2'><span>Menu 2.2</span></a>
<ul>
<li><a href='#Link 2.2.1'><span>Menu 2.2.1</span></a></li>
<li><a href='#Link 2.2.2'><span>Menu 2.2.2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#Link 3'><span>Menu 3</span></a></li>
<li><a href='#Link 4'><span>Menu 4</span></a></li>
</ul>
</div>​

Langkah 4. Sebelum menyimpan widget, ubah dulu:

• Kode berwarna Hijau menjadi alamat link,
• Kode berwarna Biru menjadi judul link.

Langkah 4: Nah, setelah selesai klik "Simpan".

Jangan lupa like Facebook kami untuk update berikutnya.