CARA MEMBUAT MENU HORIZONTAL DI BLOGSPOT

Pengertian Menu Horizontal
Menu Horizontal adalah navigasi khusus yang berisi shorcut link menuju halaman tertentu baik halaman internal webblog maupun halaman external webblog. Menu horizontal dapat anda jumpai dalam suatu website atau blog berada di bawah header, namun ada juga yang meletakkannya di atas header. Tergantung selera pemilik web atau blog. Selain bertujuan sebagai shorcut link, menu horizontal juga dapat mempercantik penampilan suatu web atau blog.

Bagaimana dengan blogspot anda ? Apakah blogspot anda telah memiliki menu horizontal ? Jika anda menggunakan template default dari blogspot dan belum memodifikasinya, maka berkemungkinan anda tidak memiliki menu horizontal. Cara sederhana untuk memiliki menu horizontal adalah dengan menggunakan feature "EDIT HALAMAN" yang disediakan oleh blogspot. Caranya, setelah anda login, klik menu"POSTING" dan klik menu 'EDIT HALAMAN". Nah selanjutnya silahkan ikuti petunjuk yang diberikan oleh blogspot untuk mengedit menu halaman. Bila sudah jadi, letakkan menu di atas poting blog anda dalam posisi horizontal, maka hasilnya anda akan memiliki menu horizontal hanya dengan menggunakan feature edit halaman dari blogspot. Dengan cara yang sederhana tersebut, tentunya anda hanya akan mendapatkan tampilan menu horizontal yang sederhana.

Jika anda ingin mendapatkan tampilan menu horizontal yang lebih berfariasi dengan mengikuti selera pewarnaan, button, font, dan lainnya sesuai selera anda. Contoh simpelnya anda dapat melihat menu horizontal yang terlihat pada bagian atas halaman ini. maka silahkan ikuti panduan di bawah ini.

• Silahkan anda Login ke account blogger milik anda sendiri.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
• Untuk mengantisifasi kesalahan dalam pengeditan, maka simpanlah lebih dahulu template yang sedang anda gunakan dengan cara meng-klik tulisan Download Template Lengkap.
• Carilah kode ]]> dan Copy-Paste (copas) kode berikut di atasnya. Jika anda sulit menemukan kode tersebut, maka anda dapat mencari kode tersebut dengan cara menekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), tulis kode tersebut dan klik pencarian.

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Anda boleh melakukan perubahan berikut :

1. Sesuaikanlah warana menu horizontal anda dengan kondisi pewarnaan template yang sedang anda gunakan. Caranya gantilah kode merah sesuai dengan kode warna yang anda inginkan.
2. Khusus untuk kode yang berwarna hijau, adalah kode untuk menentukan lebar menu horizontal dan sesuaikanlah dengan kondisi blog anda.
3. Untuk mendapatkan kode warna, 
   

• Kemudian cari kembali kode seperti di bawah ini.

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

... dan seterusnya ...</b:section>
</div>

• Copas kode di bawah ini tepat di bawah kode yang berwarna hijau atau berwarna merah (Alamat URL dan judul menu disesuaikan dengan template blog anda).

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://namadomain-anda.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://namadomain-anda.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

</div><!-- akhir bg_nav -->

• Setelah semuanya selesai diedit, maka selanjutnya, kliklah tombol save (simpan). Dan periksalah apakah pengeditan anda berhasil.
• Jika belum berhasil maka ulangi 1 atau 2 kali lagi, dan periksalah jika ada kode yang salah letak atau tertinggal. Namun jika masih belum berhasil juga, maka berkemungkinan template yang anda gunakan tidak sesuai untuk penggunaan cara di atas. Anda dapat mengembalikan template anda ke template semula dengan cara meng-upload template yang sudah anda simpan di hardis anda.

Anda baru saja membaca artikel yang berkategori Tips Blog dengan judul CARA MEMBUAT MENU HORIZONTAL DI BLOGSPOT. Anda bisa bookmark halaman ini dengan URL https://kutulissajala.blogspot.com/2011/11/cara-membuat-menu-horizontal-di.html. Terima kasih!

Ditulis oleh: Unknown - Minggu, 27 November 2011