Cara Membuat Horizontal Tab Menu

Memiliki menu navigasi terlihat seperti ini?

Silahkan arahkan mouse Anda pada navigasi di bawah ini:

• Home
• Produk
• Obral Plus
• Belajar Website

Bunga untuk menginstal menu navigasi di blog Anda? silahkan baca langkah-langkah sampai selesai.

Saya perlu menegaskan bahwa skrip yang saya berikan adalah kemungkinan tidak bisa dalam menerapkan sempurna di blog Anda, karena faktor template yang berbeda satu sama lain, untuk itu mungkin Anda perlu sedikit script beberapa yang saya berikan.

Ini adalah langkah nya:

Klik kanan pada kedua gambar ini, kemudian klik menyimpan gambar Sebagai ... kemudian menyimpannya di komputer Anda.

tableftJ.gif	tabrightJ.gif

Kemudian meng-upload baik gambar ke server tempat biasa anda menyimpan gambar yang Anda miliki. contoh: Aku biasa saya menyimpan gambar di halaman google, dan gambar memiliki alamat menjadi seperti ini:

http://ahom24.googlepages.com/tableft10.gif

http://ahom24.googlepages.com/tabright10.gif


Jadilah pada kenyataannya, Anda dapat menggunakan kedua alamat gambar, tapi saya khawatir jika terlalu banyak pengguna menggunakan alamat ini, server tidak bisa menangani sehingga menu navigasi menjadi tidak berfungsi lebih baik.

Banyak cara untuk menginstal kode ini, salah satu caranya adalah seperti ini:

Langkah # 1:

1. Login ke blogger dengan ID anda
2. Setelah memasukkan halaman Dasboard, klik Layout . Coba lihat gambar:

3. Kemudian klik edit HTML tab. Coba lihat gambar:

4. Saya menyarankan kepada Anda, terlebih dahulu untuk back up template Anda. Klik Download full template link. Coba lihat gambar:

5. Setelah Anda mengklik Download full template link, maka akan muncul jendela baru hanya untuk men-download. Klik Simpan tombol. Melihat gambar:

6. Anda bisa memilih data ini akan disimpan di mana dan dengan apa nama file apa, Setelah itu berakhir dengan klik pada Simpan tombol. Coba lihat gambar:

7. Copy dan paste kode di atas ]]></ b: skin>
/*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ahom24.googlepages.com/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ahom24.googlepages.com/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }
8. Pergi ke bawah, kode pencarian tampak seperti menjadi seperti:
<B: = class id 'header' bagian '=' header maxwidgets '= 1 'showaddelement' = no '> <b: widget id =' Header1 'terkunci =' true title '=' judul blog Anda (Header) 'type = 'Header' /> </ b:> bagian
9. Ubah pencetakan kode dengan warna hijau, sehingga kodenya menjadi seperti ini:
<B: = class id 'header' bagian maxwidgets 'header' = '= 2 'showaddelement =' yes '> <b: widget id' terkunci = '=' Header1 false title '=' judul blog Anda (Header) 'type = 'Header' /> </ b:> bagian
10. Klik     . Tunggu beberapa saat melakukan wajib template Anda miliki di tabungan.

Langkah # 2

1. Klik di Elemen Halaman tab. Lihat gambar di bawah ini:

2. Klik pada Tambah Elemen Halaman yang terletak di atas dari elemen header . Lihat gambar berikut:

3. Setelah muncul pop up, Klik Tambahkan ke blog tombol untuk hal-hal HTML / JavaScript. Lihat gambar berikut:

4. Copy dan paste kode di bawah ini ke kolom yang tersedia (jangan lupa untuk mengubah hubungan dengan link milik Anda sendiri):
<div id="tabs10"> <!-- tabs10 begin --> <ul> <!-- Change the links with your own links --> <li id="current"><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="#"><span>Order</span></a></li> <li><a href="http://www.obralplus.com/?id=rohman"><span>Obral Plus</span></a></li> <li><a href="http://www.resepbisnis.com/?id=rohman"><span>Belajar Website</span></a> </ul> </div ><!-- tabs10 end -->
5. Klik      
6. Selesai. Silakan lihat hasilnya.

Selain cara diatas, tentunya masih banyak lagi yang dapat Anda lakukan, silakan mencoba dengan diri Anda.

Jangan pernah berhenti untuk melakukan percobaan!

Posted in: Blogger