Cara Membuat Tab Menu. Postingan ini kelanjutan dari Cara Membuat Tab Menu Sederhana. Tidak disangka postingan yang sederhana dan bahasanya masih ruwet, hampir dua bulan bisa menduduki entri populer. Dan jumlah tampilannya sampai saat ini sudah menembus 2.000 an. Suatu penghargaan tersendiri.
Memang tampilan tab menu bawaan blogspot terlalu sederhana, sehingga tidak memiliki ciri khusus tersendiri. Postingan kali ini sengaja kode-kodenya tidak dibuat scrol sehingga postingan tampak memanjang kebawah. Dengan harapan kode-kodenya bisa langsung dilihat dan akan mudah untuk dipahami. Bagi yang ingin memiliki tampilan tab menu yang sederhana dan berbeda, mari kita simak cara-caranya.
Tahap Pertama :
- Klik Desain.
- Klik Tata Letak.Klik Tambahkan Gadget.
- Klik HTML/Javascript
- Lalu copy-paste kode dibawah ini.
<nav id='menutabdjb'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tabel Warna</a></li>
<li><a href='#'>Kontak Me</a></li>
</ul>
</nav>
- Untuk Warna merah silahkan ganti, sesuai dengan URL/link dan nama laman tersebut.
- Klik Simpan
Tahap ke dua
Dalam tahap ini, sebenarnya kita hanya ingin mengganti kode CSS nya biar tidak tempuk dengan bawaan blogspot.
- Klik Desain
- Klik Template
- Klik Edit HTML
- Cari kode yang mirip seperti dibawah ini :
/* Tabs
----------------------------------------------- */
.tabs-outer {
position: relative;
background: transparent;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner {
padding: 0;
}
.tabs-inner .section {
margin: 0 35px;
}
*+html body .tabs-inner .widget li {
padding: 1px;
}
.PageList {
border-bottom: 1px solid $(tabs.border.bevel.color);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: $(tabs.selected.background.color) none ;
color: $(tabs.selected.text.color);
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
margin-right: 1px;
padding: .65em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
background-color: $(tabs.background.color);
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
- Kemudian hapus kode yang berwarna merah dan ganti dengan kode dibawah ini :
#menutabdjb{background:url(http://2.bp.blogspot.com/-97tLvnBQlSc/UaMCPoTySqI/AAAAAAAAHe4/ul2lRiO4V4g/s1600/DjBtab.png);color:#eee;height:35px;border-bottom:4px solid #111}
#menutabdjb ul,#menu li{margin:0;padding:0;list-style:none}
#menutabdjb ul{height:35px}
#menutabdjb li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: -1px -1px #702120;border-right: 1px solid #b64d4a;border-left: 1px solid #892f2d;text-transform:uppercase}
#menutabdjb li:first-child{border-left: none}
#menutabdjb a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menutabdjb li a:hover{
background:#979797;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#222;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #404040;-webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040;
}
- Kode warna biru bisa diganti dengan gambar background yang serasi dengan warna template sahabat.
- Klik Pratinjau.
- Jika sudah sesuai seperti yang diharapkan Klik Simpan template.
Jika gambar Header dengan tab menu masih ada jarak, langkah selanjutnya adalah:
- Masih dalam tahap kedua.
- Cari kode seperti dibawah ini :
/* Header
----------------------------------------------- */
.header-inner {
padding: 27px 0 3px;
}
.header-inner .section {
margin: 0 35px;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: 115%;
color: $(description.text.color);
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
- Ganti angka 3 berwarna merah dengan angka 0, dan angka 0 berwarna merah silahkan ganti dengan angka -10px atau mungkin dengan angka lain sampai benar-benar antara header dengan tab menu menyatu.
- Liat pratinjau
- Dan Klik Simpan jika sudah sesuai dengan yang diharapkan.
Cukup sekian tentang Cara Membuat Tab Menu, semoga lain waktu masih bisa menyajikan model tab menu yang lainnya. Semoga berhasil !
♥♥DjB♥♥