Menu Horizontal dengan sub-tab dua kolom di Blogger

info-gamepc.blogspot.com - Ini adalah menu horizontal yang sangat bagus di mana sub-tab yang ditampilkan dalam dua kolom dan juga dibuat dengan CSS, tanpa script, keren kan.

Cara - cara menambah Menu Horisontal Dengan Sub Tab di Dua Kolom Untuk Blogger

1: Di Blogger sobat, pergi ke "Layout" dan pada "Page Elements". Klik pada "Add a Gadget" link di bawah gambar header Anda Dari Daftar Gadget, pilih "HTML / JavaScript".

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

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

</ul>
<br class='clearit'/>
</div>
</div> 

Sesuaikan tab utama Anda dengan mengubah Judul Tab 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://Blog anda.com

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

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li> 

3: Sekarang mari kita melangkah lebih jauh dan menambahkan gaya CSS di Template kita, Pergi ke Template> Edit HTML

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

Lalu klik dimana saja di dalam kode area dan pencarian - menggunakan tombol CTRL + F - untuk ]]></b:skin> dan letakkan tepat di atas ]]></b:skin>, lalu tambahkan kode ini:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
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 a {
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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPr1v_FNH-fVGBtLW3bOG-qwWSGSaxZwXScq38HCFbCCkPAaw8d7hc7GX51snGX8Vp29ceWez_5iD4_ZA0wJv_o6zqactBleDpp-PiXQr4gBENZ5SqwP1qcYPSybmOhIOBdF0GFcL0yrs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
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:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Sekarang cari dengan (CTRL + F) baris ini:

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

Dan tepat di bawah garis-garis kecil, hapus kode di bawah sampai mencapai di:

/* Columns
----------------------------------------------- */

Ganti kode yang telah dihapus, dan tambahkan kode ini:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

4: Langkah terakhir adalah untuk Simpan Template Anda!

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