Menu Horisontal Dengan Sub-Tab Dalam Dua Kolom Untuk Blogger

ni adalah menu horizontal yang sangat bagus di mana sub-tab yang ditampilkan dalam dua kolom dan juga dibuat dengan CSS, tanpa script. 

"Keuntungan" sehingga untuk berbicara, adalah bahwa sub-tab ketika disusun dalam dua kolom yang tidak terlalu lama, sehingga akan rapi dan sedikit ruang bersama. Anda dapat melihat contoh di sini: 

• Tab 1 Judul Here
• Tab 2 Judul Here
• Tab 3 Judul Here
• Tab 4 Judul Here
• Tab 5 Judul Here
• Tab 6 Judul Here

MENAMBAH MENU HORISONTAL DENGAN SUB TAB DI DUA KOLOM UNTUK BLOGGER

LANGKAH 1: Di Blogger, pergi ke "Layout" dan pada "Page Elements" section. 

• Klik pada "Add a Gadget" link di bawah gambar header Anda
• Dari Daftar Gadget, pilih "HTML / JavaScript" pilihan.

LANGKAH 2:. Cukup copy dan paste kode SELURUH ini ke widget Anda Catatan: Biarkan "Judul" dari widget ini kosong. 

 <div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<a href=' http://YOUR URL HERE.com'> Tab 1 Judul Berikut </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Tab 2 Judul Berikut </ a> </ li>
<li> <a class='submenucol' href=''> # Tab 3 Judul sini </ a>
<ul>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.1 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.2 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.3 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.4 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.5 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 3.6 </ a> </ li>
</ Ul>
</ Li>
<li> <a class='submenucol' href=''> # Tab 4 Judul sini </ a>
<ul>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.1 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.2 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.3 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.4 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.5 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 4.6 </ a> </ li>
</ Ul>
</ Li>
<li> <a class='submenucol' href=''> # Tab 5 Judul sini </ a>
<ul>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.1 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.2 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.3 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.4 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.5 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.6 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.7 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 5.8 </ a> </ li>
</ Ul>
</ Li>
<a href=' http://YOUR URL HERE.com'> Tab 6 Judul Berikut </ a> </ li>

</ Ul>
class='clearit'/> <br
</ Div>
</ Div>

Sesuaikan tab utama Anda dengan mengubah Judul Tab untuk apa pun yang Anda inginkan. Sertakan URL untuk masing-masing jika Anda ingin menjadi 'diklik'. Jika tidak, Anda hanya dapat menempatkan sebuah tanda # di mana dikatakan http://YOUR URL HERE.com 

Anda dapat menambahkan atau menghapus karena banyak tab utama yang Anda butuhkan, hanya pastikan untuk menyalin seluruh kode untuk tab utama untuk setiap tab tambahan yang Anda inginkan: 

 <a href=' http://YOUR URL HERE.com'> Tab 7 Judul sini </ a>
<ul>
<a href=' http://YOUR URL HERE.com'> Sub Tab 7.1 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 7.2 </ a> </ li>
<a href=' http://YOUR URL HERE.com'> Sub Tab 7.3 </ a> </ li>
</ Ul>
</ Li>

LANGKAH 3: Sekarang mari kita melangkah lebih jauh dan menambahkan gaya CSS di Template kami 

• Pergi ke Template> Edit HTML

• Klik panah ke samping sebelah <b:skin> ... </ b: skin>

• Lalu klik mana saja di dalam kode area dan pencarian - menggunakan tombol CTRL + F - untuk]]> </ b: skin> tag dan tepat di atas]]> </ b: skin> tambahkan kode ini:

 / * Menu Horizontal dengan 2 kolom
----------------------------------------------- * /
# Menucol {
width: 940px;
height: 37px;
background-image:-moz-linear-gradient (top, # 666666, # 000000);
background-image:-webkit-gradien (linear, kiri atas, kiri bawah, warna-stop (0.00, # 666666), warna-stop (1.0, # 000000));
menyaring:
border-bottom: 1px solid # 666666;
border-top: 1px solid # 666666;
margin: 0 auto; padding: 0 auto;
overflow: hidden;
}
# Topwrapper {
width: 940px;
height: 40px;
margin: 0 auto;
padding: 0 auto;
}
. Clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
# Top {
width: 100%;
}
# Top, # top ul {
padding: 0;
margin: 0;
list-style: none;
}
# Top {
border-right: 1px solid # 333333;
text-align: left;
display: block;
text-decoration: none;
padding: 10px 12px 11px;
Font: bold 14px Arial;
text-transform: none;
color: # eee;
}
# Top a: hover {
background: # 000000;
color: # F6F6F6;
}
# Top a.submenucol {
background-image:
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: center yang tepat;
}
# Top li {
float: left;
position: relative;
}
# Top li {
position: static penting;!
width: auto;
}
# Top li ul, # top ul li {
width: 300px;
}
# Top ul li a {
text-align: left;
padding: 6px 15px;
font-size: 13px;
font-weight: normal;
text-transform: none;
font-family: Arial, sans-serif;
border: none;
}
# Top li ul {
z-index: 100;
position: absolute;
display: none;
background-color: # F1F1F1;
margin-left: 80px-;
padding: 10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow: 0 2px 2px RGBA (0,0,0,0.6);
filter: alpha (opacity = 87);
opacity: .87;
}
# Top li ul li {
width: 150px;
float: left;
margin: 0;
padding: 0;
}
# Top li: melayang-layang ul, # top li.hvr ul {
display: block;
}
# Top li: melayang-layang ul a, # top li.hvr ul a {
color: # 333;
background-color: transparent;
text-decoration: none;
}
# Top ul a: hover {
text-decoration: underline penting;
color: # 444444 penting;
}

• Sekarang cari (CTRL + F) baris ini:

 / * Tabs

• Hal ini juga akan memiliki beberapa garis kecil di bawah:

 / * Tabs
----------------------------------------------- * /

• Dan tepat di bawah garis-garis kecil, menghapus kode di bawah sampai Anda mencapai di:

 / * Kolom
----------------------------------------------- * /

• Alih-alih kode yang telah dihapus, menambahkan satu ini:

 # Crosscol ul {z-index: 200; padding:! 0 penting;}
# Crosscol li: hover {position: relative;}
# Crosscol ul li {padding: 0 penting;}
. Tabs-outer {z-index: 1;}
. Tab-batin {padding: 0 0px;}

Lihat screenshot ini untuk info lebih lanjut:

LANGKAH 4: Langkah terakhir adalah untuk Simpan Template dan Anda selesai! 

Kunjungi blog Anda untuk melihat menu navigasi yang indah tepat di bawah kepala. 
Jika Anda memiliki pertanyaan atau butuh bantuan, meninggalkan komentar di bawah ini.