Cara Membuat Simple Horizontal Menu Border-Top

Horizontal menu simple border-top ini terinspirasi dari tampilan blog yang minimalis, pemasangannya pun hanya menggunakan css, jadi benar-benar simple dan tidak mempengaruhi waktu loading halaman blog anda.
Sebelumnya, saya juga pernah memberikan tutorial membuat menu horizontal dengan gradasi merah dan hitam yang dapat anda temukan di posting cara membuat menu horizontal dengan gradasi warna merah hitam.

Simple Horizontal menu

Untuk melihat demo dari menu horizontal yang saya buat kali ini, silahkan anda menuju ke demo simple menu.

Jika anda tertarik untuk menggunakan menu horizontal tersebut, silahkan ikuti tutorial pemasangan berikut :

Cara membuat menu horizontal border-top

Silahkan anda menuju ke menu edit HTML blog anda.

Cari markah seperti ini :  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
di dalam kode HTML template blog anda
( Untuk mempermudah, gunakan ctrl + f )

kemudian anda rubah kode tersebut menjadi
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

di bawah kode tersebut anda akan menemukan markah seperti berikut,

<b:widget id='Header1' locked='true'

Silahkan anda rubah tulisan true menjadi false, seperti berikut,

<b:widget id='Header1' locked='false'

Selanjutnya, cari kode ]]></b:skin>  , lalu pastekan kode CSS berikut di atas ]]></b:skin>

#menu {width:800px;background:#fff;border-top:1px solid #999;margin: 0 auto;}
#menu li {list-style: none; float: left; margin: 3px 15px;}
#menu li a {text-decoration:none;font-family: verdana;font-size:small; color:#999;}
#menu li a:hover {text-decoration:none;color:#000;border-top:3px solid #000;}
Kemudian simpan template anda.

Menambahkan menu di tata letak

Silahkan anda menuju ke menu tata letak

Anda akan menemukan menu baru di atas header blog anda, silahkan klik tambahkan gadget

Pilih HTML/Javascript, kemudian paste-kan markah HTML berikut :

<ul id="menu">
<li><a href="url label 1">Nama label 1</a></li>
<li><a href="url label 2">Nama label 2</a></li>
<li><a href="url label 3">Nama label 3</a></li>
<li><a href="url label 4">Nama label 4</a></li>
<li><a href="url label 5">Nama label 5</a></li>
</ul>

Silahkan anda sesuaikan tulisan berwarna merah di atas agar mengarah ke label di blog anda, silahkan juga menambah atau mengurangi jumlah link dalam kode HTML tersebut sesuai jumlah label di blog anda, kemudian simpan.

Masih di menu tata letak, anda dapat menggeser widget baru tersebut ke bawah atau ke atas header, silahkan anda sesuaikan dengan selera anda sendiri, dan lihat hasil pemasangan menu horizontal simple border top tersebut di homepage blog anda.
Selamat mencoba.

Artikel Cara Membuat Simple Horizontal Menu Border-Top ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;