Membuat Menu Navigasi Horisontal

Tips Membuat Menu Navigator Horisontal Sederhana. Lagi-lagi, tips kali ini adalah tips yang sudah basi namun sekali lagi, pasti masih ada new blogger yang belum mengetahui dan membutuhkannya. Jika pun tidak ada yang membutuhkannya biarlah postingan ini menjadi sampah blog, yang penting nge-blog. Yang tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Sebelumnya, jika ada yang belum paham, Tips dan Trik Blog akan sedikit memberi gambaran mengenai Menu Navigasi Horisontal ini. Menu Navigasi Horisontal adalah sederetan menu horizontal (memanjang ke samping) yang berfungsi sebagai navigator atas suatu halaman blog atau URL blog. Ketika pengunjung melakukan klik pada menu-menu tersebut maka pengunjung akan di bawa menuju ke link atau halaman yang telah kita setting sebelumnya.

Dengan melihat fungsinya tersebut, kita dapat mengaplikasikan Menu Navigasi Horisontal untuk berbagai keperluan, misalnya kita dapat membuat menu yang menunjuk ke link URL blog kita yang lain atau pun halaman blog yang kita anggap penting lainnya, seperti halaman buku tamu, dan lain-lain.

Screenshot contoh Menu Navigasi Horisontal adalah seperti di bawah ini.


Langkah-langkah membuatnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, temukan kode ]]></b:skin> (jika menggunakan Firefox, gunakan saja Ctrl + F untuk memudahkan pencarian kode tersebut).

Ketiga, copy kode di bawah ini di atas kode ]]></b:skin>

.menuhorisontal{
width: 100%;
overflow: hidden;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Arial; /* jenis dan ukuran huruf */
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid black;
border-left:1px solid black;
color:#071907;
background: #A9F5A9; /*warna background Menu*/
}

.menuhorisontal li a:visited{
color: #088A08; /* warna teks menu jika linknya pernah dikunjungi*/
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#58ACFA; /*Warna Background Ketika Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

Keterangan, silakan untuk mengganti warna dan juga font sesuai dengan selera masing-masing. Kode html untuk warna silakan lihat di sini.

Keempat, langkah berikutnya adalah cari dan temukan kode berikut ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Testing Blog (Header)' type='Header'/>
</b:section>
</div>

Atau jika tidak ketemu, cari kode yang mirip atau jika bingung cari kode yang diapit warna merah.

Kelima, tempatkan kode di bawah ini di bawah kode di atas tersebut.

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Keenam, simpan template

Ketujuh, langkah berikutnya adalah kita menuju menu Elemen Halaman (Dasbor >> Tata Letak >> Elemen Halaman).

Sekarang kita sudah dapat menambahkan gadget yang letaknya di bawah header.




Kedelapan, klik Tambah Gadget >> Tambahkan HTML/Javascript

Kesembilan, copy kode dengan format seperti di bawah ini.

<div class="menuhorisontal">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://onoid.blogspot.com">Tips Trik Komputer</a></li>
<li><a href="http://tips-net.blogspot.com">Tips Internet</a></li>
<li><a href="http://clixsense2007.blogspot.com">Bisnis Internet<a></li>
</ul>
</div>

Keterangan
Silakan untuk mengganti URL dan Link Teks sesuai dengan kehendak masing-masing.blognya masing-masing.

Kesepuluh, Simpan Perubahan

Kesebelas, refresh blog dan pastikan menu navigasi horizontalnya sudah “nangkring” pada header blog kita.

Selamat Mencoba!!

(sumber referensi : Tutorial Jitu)
Description: Membuat Menu Navigasi Horisontal Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Menu Navigasi Horisontal