Cara Membuat Menu Horizontal Tabs

Apa yang horisontal tab menu? horisontal Tab menu adalah bla .. bla .. bla ... . Aku tidak bisa menjelaskan lagi, he .. he, itu terlihat seperti ini:


Untuk membuat hal ini tidak sesederhana melihat itu, itu rumit. Anda harus merancang tombol, Anda harus membuat kode CSS dan HTML. Sekarang saya akan menunjukkan kepada Anda bagaimana untuk membuat "menu Horizontal tab" di blogger.

Yang thing pertama Anda have ke di adalah create an image like ini:
dan
Jika Anda tidak dapat membuat itu, Anda dapat menggunakan gambar di bawah ini saya:

blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif

Ok, mari kita mulai
1. Login ke Blogger, pilih "Lay out -> Template -> Edit HTML"2. Jangan lupa untuk membackup template Anda terlebih dahulu.3. Periksa "Expand Template Widget" kotak centang.4. Cobalah untuk menemukan kode ini]]> </ b: skin>, jika Anda menemukannya kemudian menempatkan kode di bawah ini di atasnya
/ * Kredit: http://trick-blog.blogspot.com * /# Tabshori {float: left;width: 100%;font-size: 13px;border-bottom: 1px solid # 2763A5; / * Under Line, Anda dapat mengubah atau menghapusnya * /line-height: normal;}# Tabshori ul {margin: 0;padding: 10px 10px 0 50px; / * posisi menu * /Daftar-style: none;}# Tabshori li {display: inline;margin: 0;padding: 0;}# Tabshori a {float: left;background: url ("http://blogoholic.info/files/menu/blackleft.gif") ada pengulangan-kiri atas;margin: 0;padding: 0 0 0 4px;text-decoration: none;}# Tabshori rentang {float: left;display: block;background: url ("http://blogoholic.info/files/menu/blackright.gif") no-ulangi kanan atas;padding: 5px 14px 4px 4px;color: # 24618E; / * Teks menu warna * /}# Tabshori rentang {float: none;}/ * End IE5-Mac hack * /# Tabshori a: hover {background-position: 0%-42px;}# Tabshori a: hover {rentangbackground-position: 100%-42px;}
Anda dapat mengubah teks tebal dengan gambar lainnya, misalnya, jika Anda ingin memilih gambar menu merah saya kode akan menjadi seperti ini:
background: url ("http://blogoholic.info/files/menu/redleft.gif") ada pengulangan-kiri atas;
background: url ("http://blogoholic.info/files/menu/redright.gif") no-ulangi kanan atas;
5. Kemudian copy kode di bawah
<div id="tabshori"><ul><- Mengubah link dengan link Anda sendiri -!><li> <a href="http://trick-blog.blogspot.com"> <span> Rumah </ span> </ a> </ li><li> <a href="http://trick-blog.blogspot.com"> <span> Trik-Tips </ span> </ a> </ li><li> <a href="http://trick-blog.blogspot.com"> <span> Template Gratis </ span> </ a> </ li><li> <a href="http://trick-blog.blogspot.com"> <span> Blog Kamus </ span> </ a> </ li><li> <a href="http:/trick-blog.blogspot.com"> <span> Profil </ span> </ a> </ li></ Ul></ Div>
mengubah http://trik-tips.blogspot.com dengan link Anda sendiri, dan mengubah teks tebal dengan teks Anda sendiri.
6. Langkah selanjutnya adalah untuk menempatkan menu tab ke blog Anda, hal ini lebih sulit karena kita memiliki template yang berbeda. Ada beberapa metode untuk melakukan hal ini, Berikut adalah metode, Anda dapat memilih dan mencoba untuk setiap metode.
- Metode A:Cari kode ini: <div id="content-wrapper">. jika Anda menemukannya, paste kode di atas (kode nomor lima) di atasnya. Preview template Anda, jika terlihat baik menyimpan editting Anda, tetapi jika itu tidak baik mencoba untuk menempatkan di atas kode </ div>, Anda akan menemukan kode banyak seperti itu, cobalah untuk menempatkan kode di atas itu dan preview blog Anda, lakukan lebih sering sampai cocok untuk template Anda.
Jika Anda memiliki bagus dengan posisi menu Anda, tidak perlu untuk melakukan metode B, tetapi jika Anda merasa sulit untuk menerapkan metode A Anda dapat mencoba metode B- Metode B:Cari kode di bawah ini:
<B: section class = 'header' id = 'header'maxwidgets = '1 'showaddelement =' no '><B: widget id = 'Header1' dikunci = 'benar'title = 'blog title (Header)' type = 'Header' /></ B: section>
mengubah teks hijau sehingga menjadi seperti ini:
<B: section class = 'header' id = 'header'maxwidgets = '2 'showaddelement =' yes '><B: widget id = 'Header1' dikunci = 'palsu'title = 'blog title (Header)' type = 'Header' /></ B: section>
Simpan pengaturan Anda, pergi ke "Elemen Halaman" dan klik "Tambah Elemen Halaman" di bagian header, pilih "HTML / JavaScript" kemudian memasukkan nomor lima kode di atas ke dalam kotak "konten", kemudian klik "save" dan pratinjau Anda baru blog.

Sumber : http://trick-blog.blogspot.com/2008/01/how-to-create-horizontal-tabs-menu.html