membuat menu tab atas keren

Nama
Kontak
Durasi
Posisi
Url
Judul
Gambar
Kirim

Dalam artikel ini diuraikan secara lebih rinci mengenai teknik serta script atau rangkaian kode yang digunakan untuk membuat bilah navigasi dengan beberapa sub menu di dalamnya. Selain itu rangkaian kode yang digunakan dalam teknik ini juga merupakan pembenahan serta pembaruan atas rangkaian kode yang digunakan dalam teknik desain, sehingga bilah navigasi maupun sub menu yang dihasilkan pun menjadi tampak lebih rapi dan terkesan lebih profesional.

Beberapa fiturm n yang dimaksud antara lain adalah penggunaan model menu melengkung (rounded corners) dan gradasi warna untuk setiap tab menu yang terdapat pada bilah navigasi, serta ditiadakannya penggunaan warna yang termasuk dalam kategori ‘Red, Green, Blue, Alpha (RGBA)’. Disamping itu dengan menggunakan rangkaian kode yang disertakan dalam artikel ini, Anda pun dapat dengan mudah menambahkan sub menu (sampai dengan 3 (tiga) level atau tingkatan menu) untuk masing-masing tab yang ada pada bilah navigasi. Selanjutnya untuk keperluan tersebut Anda dapat melakukannya dengan mengerjakan langkah-langkah di bawah ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian apabila pada blog yang Anda kelola masih ditampilkan bilah Navbar Blogger, maka sisipkan kode CSS yang digunakan untuk menyembunyikannya..

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*----------------------------------------------------------------
Kustomisasi Bilah Navbar Yang Terdapat Di Atas Header Halaman Blog
Oleh: woconen
-----------------------------------------------------------------*/

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada bilah navigasi pengganti navbar
-----------------------------------------------------------*/
.bilah-menu-atas {
width: 100%; 
min-width: 968px;
position: fixed;
top: 0px; 
left: 0px;
right: 0px;
height: 29px;
font: 13px Arial;
z-index: 99;
white-space: nowrap;
background: #1975D1;
background: -moz-linear-gradient(center top , #1975D1 0%, #00478F 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#1975D1), to(#00478F));
box-shadow: 0px 2px 4px rgb(14, 90, 140);
border-bottom: 1px solid     #4D94DB;
}

.kolom-utama { 
z-index: 100;
width: 968px;
height: 27px;
margin: 0px auto;
padding: 0px;
}

.kolom-menu {
width: auto;
height: auto;
margin: 0px;
float: left;
display: inline;
}

.kolom-menu ul {
height: auto;
margin: 0px;
padding: 0px;
}

/* Keterangan:
   Fungsi kode CSS berikut ini adalah untuk mengatur setelan
   yang digunakan pada tab menu
-----------------------------------------------------------*/
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
margin-right: 1px;
margin-left: 1px;
padding-left: 1px;
padding-right: 1px;
height: 25px;
border-top: none;
border-bottom: 1px solid #3385D6;
border-left: 1px solid #3385D6;
border-right: 1px solid #3385D6;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
background: #005CB8;
background: -moz-linear-gradient(center top , #005CB8, #003D7A) repeat scroll 0% 0%;
background: -webkit-gradient(linear, left top, left bottom, from(#005CB8), to(#003D7A));
}

/* Keterangan:
   Setelan warna huruf dapat diubah dengan mengganti kode warna
   yang terdapat pada color: #ffffff;
----------------------------------------------------------------------*/
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
position: relative;
}

/* Keterangan:
   Rangkaian CSS di bawah ini digunakan untuk menentukan
   setelan warna latar menu ketika disorot dengan memakai mouse pointer
----------------------------------------------------------------------*/
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
background: #CC0066;
background: -moz-linear-gradient(center top , #CC0066, #8F0047) repeat scroll 0% 0%;
background: -webkit-gradient(linear, left top, left bottom, from(#CC0066), to(#8F0047));
}

/* Fungsi CSS di bawah ini untuk mengatur setelan Sub Menu Pertama, Kedua dan Ketiga
   Keterangan:
   Warna garis dan background dapat diubah dengan mengganti
   kode warna yang terdapat pada border: 1px solid #4D94DB; dan background: #005CB8;
-----------------------------------------------------------------------------------*/
.kolom-menu ul li ul,
.kolom-menu ul li:hover li ul, 
.kolom-menu ul li:active li ul, 
.kolom-menu ul li:focus li ul,
.kolom-menu ul li ul li:hover li ul, 
.kolom-menu ul li ul li:active li ul, 
.kolom-menu ul li ul li:focus li ul {
z-index: 100;
position: absolute;
left: -3000px;
height: auto;
width: auto;
margin-right: 10px;
padding-bottom: 1px;
border: 1px solid #4D94DB;
background: #005CB8;
white-space: normal;
text-align: justify;
padding: 2px 0px;
}

.kolom-menu ul li ul li, 
.kolom-menu ul li ul li ul li,
.kolom-menu ul li ul li ul li ul li {
border: none; background: inherit; height: auto;
border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;
}

.kolom-menu ul li ul li a, .kolom-menu ul li ul li ul li a,
.kolom-menu ul li ul li ul li ul li a {
margin-right: 0px; border: none; padding-right: 0px;
}

.kolom-menu ul li ul li a:hover, .kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover, .kolom-menu ul li ul li ul li a:focus,
.kolom-menu ul li ul li ul li ul li a:hover, .kolom-menu ul li ul li ul li ul li a:focus {
border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;
}

/* Kode CSS untuk setelan lebar kolom dan posisi sub menu pertama
----------------------------------------------------------------*/
.kolom-menu ul li ul li a { width: 150px; }

.kolom-menu ul li:hover ul, 
.kolom-menu ul li:active ul, 
.kolom-menu ul li:focus ul {
top: auto; left: 0px; 
}

/* Kode CSS untuk setelan lebar kolom sub menu kedua
---------------------------------------------------*/
.kolom-menu ul li ul li ul li a { width: 150px; }

/* Keterangan:
   Posisi Sub Menu Kedua = Lebar Kolom Sub Menu Pertama + 12px
   Sehingga jika lebar kolom sub menu pertama adalah 150px,
   maka posisi sub menu kedua adalah 162px
--------------------------------------------------------------*/
.kolom-menu ul li ul li:hover ul, 
.kolom-menu ul li ul li:active ul, 
.kolom-menu ul li ul li:focus ul {
top: -1px; left: 162px;
}

/* Kode CSS untuk setelan lebar kolom sub menu ketiga
----------------------------------------------------*/
.kolom-menu ul li ul li ul li ul li a { width: 150px; }

/* Keterangan:
   Posisi Sub Menu Ketiga = Lebar Kolom Sub Menu Kedua + 12px
   Sehingga jika lebar kolom sub menu kedua adalah 150px,
   maka posisi sub menu ketiga adalah 162px
------------------------------------------------------------*/
.kolom-menu ul li ul li ul li:hover ul, 
.kolom-menu ul li ul li ul li:active ul, 
.kolom-menu ul li ul li ul li:focus ul {
top: -1px; left: 162px;
}

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class="bilah-menu-atas" id="bilahmenuatas">
<div class="kolom-utama">
<div class="kolom-menu">
<ul>
<li><a href="#"><img alt="L3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioiRbC4Y_b9PJ6W70fP5poX2tjNjkSNR5RpHgqU5jBuvEvbeoHZVzxAmlPvmkigZ_O4Qfl5SJy4v-3qcxeWuGkjRDlsy8MbvVOT-XXsVwKUTsFVYYN_6nNck8jQUtF3byUJbuslBCYapk/s800/Beranda.png" height="13px" border="0" width="24px"></a></li>
<li><a href="#">Tab Menu Kiri 1</a>
<ul>
<li><a href="#">Sub Menu Tingkat 1.a</a></li>
<li><a href="#">Sub Menu Tingkat 1.b</a></li>
<li><a href="#">Sub Menu Tingkat 1.c</a>
<ul>
<li><a href="#">Sub Menu Tingkat 2.a</a></li>
<li><a href="#">Sub Menu Tingkat 2.b</a></li>
<li><a href="#">Sub Menu Tingkat 2.c</a>
<ul>
<li><a href="#">Sub Menu Tingkat 3.a</a></li>
<li><a href="#">Sub Menu Tingkat 3.b</a></li>
<li><a href="#">Sub Menu Tingkat 3.c</a></li>
<li><a href="#">Sub Menu Tingkat 3.d</a></li>
</ul>
</li>
<li><a href="#">Sub Menu Tingkat 2.d</a></li>
</ul>
</li>
<li><a href="#">Sub Menu Tingkat 1.d</a></li>
</ul>
</li>
<li><a href="#">Tab Menu Kiri 2</a></li>
<li><a href="#">Tab Menu Kiri 3</a></li>
</ul>
</div>
<div class="kolom-menu" style="float: right;">
<ul style="float: right;">
<li><a href="#">Tab Menu Kanan 1</a></li>
<li><a href="#">Tab Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>

Keterangan:

Ingat..! Sisipkan rangkaian kode tersebut tepat di bawah <body dan bukan di belakangnya. Perlu diketahui bahwa digunakannya <body di sini hanyalah untuk mempermudah dalam melakukan pencarian karena pada template yang berbeda bisa jadi rangkaian kode untuk bagian tersebut juga tidak sama.

Ganti # sesuai dengan URL halaman blog atau link artikel yang akan ditautkan. Dan kemudian ubah sesuaikan pula nama menu tampilan sesuai dengan yang dikehendaki.
Cuma daftar dapat dolar

Catatan : Sebagian anti virus mendeteksi crack , patch adalah sebagai virus untuk dapat menggunakannya silahkan nonaktifkan anti virusnya dahulu.Disini saya hanya berbagi saja, SAYA tidak bertanggung jawab bila terjadi kerusakan kesalahan dikarenakan software atau progam dsb, semua menjadi tanggung jawab anda sendiri

DILARANG MENG COPY PASTE SEMUA ISI ARTIKEL TANPA ADA IZIN TETULIS DAN TANPA MENYERTAKAN LINK SUMBERNYA!!

Artikel Terkait tutorial blog

Top Bottom Close

5 comments

Unknown said... Sunday, March 17, 2013

Wuih Mantab nikh Mas Artiket tutorial blog nya..ini maksud nya Menu tab atas yg seperti Dropdown apa gmna mksd nya y Mas..? idzin coba Mas TRIMA KASIH.

Nah langsung aja di coba biar tau.

Hon Book Store said... Wednesday, March 20, 2013

Artikelnya menarik :)

Makasih juga dah mampir di :

www.honbookstore.blogspot.com

Anonymous said... Friday, March 22, 2013

Nah ini yang saya cari.. langsung saya coba sobat.. mudah2an sesuai dg templatenya....

Unknown said... Sunday, June 16, 2013

makasih mas
bisa mnta tutorial memahami css gk ?
aku gk ngerti sama sekali soalnya



Url Gambar
Tipe Font
Warna Font
Ukuran Huruf
Reset?

woconen

Menu

Tombol Atas

Navbar Bawah

Search This Blog

Friday 1 February 2013

membuat menu tab atas keren membuat menu tab atas keren

5 comments

Total Tayangan Laman

Dialog perhatian

JS