Microsoft Share | Cara Memasang Menu horizontal dengan sub-tab dalam dua kolom pada Blogger | Ini adalah menu horizontal yang sangat bagus di mana sub-tab yang ditampilkan dalam dua kolom dan juga dibuat dengan CSS, tanpa script apapun.
"Keuntungan" boleh dikatakan, adalah bahwa sub-tab ketika diatur dalam dua kolom yang tidak terlalu lama, sehingga akan rapi dan sedikit ruang bersama. Anda dapat melihat contoh di sini:
Menambah menu Horizontal Dengan Sub Tab di Dua Kolom Untuk Blogger
LANGKAH 1: Di Blogger, pergi ke "Layout" dan pada "Elemen Halaman" bagian.
Klik pada "Tambah Gadget" link di bawah gambar header Anda
Dari Daftar Gadget, pilih "HTML / JavaScript".
LANGKAH 2: Cukup copy dan paste kode ini ke SELURUH 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 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:
_________________________________________________ <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>
__________________________________________________
LANGKAH 3: Sekarang mari kita melangkah lebih jauh dan menambahkan gaya CSS Template kami
Pergi ke Template> Edit HTML
Klik tanda panah samping sebelah<b:skin> ... </ b: skin>
Kemudian klik mana saja di dalam kode area dan mencari - menggunakan CTRL + F kunci - untuk]]> </ b: skin> tag dan tepat di atas]]> </ b: skin> 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/AVvXsEgNh2XFR8Dyo9UFoptmXZgXfucO_OOvzQ8VBZGdck44JMHKpM4jJUWVCJdgf4W9kn1gj-4Hywsq99ujuuEB_Z4ed_X7BLNuqyxwbwDcAJ-vltXHilNdi03F3O2igkWPZ6r6LttBsMjB8Uw/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;
}
Now find (CTRL + F) this line:
/* Tabs
It will also have some little lines beneath:
/* Tabs
----------------------------------------------- */
And just below these little lines, delete the code below until you reach at:
/* Columns
----------------------------------------------- */
Instead of the code that you have removed, add this one:
#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;}
__________________________________
Lihat screenshot ini untuk info lebih lanjut:
LANGKAH 4: Langkah terakhir adalah untuk Simpan Template dan Anda selesai!
izin coba gan
ReplyDeletethanks sudah berbagi
sips gan,.. good Luck..
Delete