Ukuwah Islamiah: Membuat Menu Horizontal <meta content='tata cara sholat sunah kata-kata hikmah ukuwahislamiah serta kursus bloger dan pasar modal ada free template juga' name='description'/> <meta content='free template, cara sholat, dhuha, tahajud, kursus blogger, ukuwahislamiah, kata-kata hikmah, sholat khusuk, belajar blogger,tip dan trik blogspot, pesantren,alquran online,tutorial blog' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/>

31 Mei 2009

Membuat Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.



Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

* Login ke account blogger kamu.
* Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

* Cari Kode kode ]]> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

* 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;
}
Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
3. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.


* Kemudian cari kembali kode seperti di bawah ini.


showaddelement='no'>


... dan seterusnya ...





* Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).




* Jangan lupa disimpan

Sumber : Tutorial Membuat Horizontal Navigasi by Kang Rohman

2 komentar:

wiyono mengatakan...

the content your blog important for bloggers other, ok and now please visit and give some comments in my blog

akhirnya aku juga menjadi pengunjung tetap mu...oiya tolong di FOLLOW bro, biar aku berkunjungnya mudah ke blog bagus mu ini.. maklum kami blogger pemula

ghaza mengatakan...

Aslkum Pa Muhammad saya sdh coba untuk membuat menu navigasi spti yang dipostingan, tetapi ketika mau disimpan template perubahan tdk bisa, bisakah memberikan solusinya?

Posting Komentar

Jangan lupa kasih komentar ya.... tapi yang membangun maklum pemula hehehe

Advertensi

 
Add to Technorati Favorites PageRank DigNow.org Join My Community at MyBloglog!
free counters

Statistik

Design Template By Syarham.com @ 2008