Minggu, Juni 07, 2009

Membuat menu navigasi (horizontal) sederhana

Panduan ini saya buat khusus buat teman-teman yang tertarik untuk menambah (memasang/membuat) menu navigasi horizontal di blog anda. Menu navigasi ini saya peroleh dari dynamicdrive. Kelebihan dari menu ini adalah tidak menggunakan image(gambar), jadi waktu loadingnya lebih cepat. kekurangannya tampilannya tidak menarik.Buat teman-teman yang tertarik anda bisa menggunakan cara pasang (tambah/buat) menu navigasi horisontal di blog dengan mengikuti prosedur di bawah ini.


Untuk membuat menu seperti di atas, bisa lakukan prosedur berikut:

1. Masuk ke Dashboard -> Tata Letak -> Edit Html
2. Cari kode berikut

]]></b:skin>
</head>


3. Setelah kode

]]></b:skin>
</head>

Masukkan script kode css berikut:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>

4. Klik tombol "Simpan Template"

5. Buka halaman "Tata Letak -> Elemen Halaman"

6. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header

7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript



8. pada kotak dialog berikut masukkan kode html

<div class="mattblacktabs">
<ul>
<li><a href="#" target="_blank">Home</li>
<li><a href="#" target="_blank">Windows</li>
<li><a href="#" target="_blank">Internet</li>
<li><a href="#" target="_blank">Modem Nokia</li>
<li><a href="#" target="_blank">ebook</li>
</ul>
</div>


catatan:
ganti url : http://artikelkomputerku.blogspot.com, dengan url blog anda
ganti # dengan url target yang akan di link ke menu
misalnya:
http://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html

Jika masih ingin menambah link navigasinya, maka sebelum
</ul>
</div>

tambahkan kode berikut:
<li><a href="url tujuan" target="_blank">teks yang ditampilkan (anchor teks)</li>



Klik tombol Simpan



Anda bisa mengatur menu navigasi tersebut, bisa anda geser di bagian atas gambar header atau di bawah gambar header.

Anda juga bisa mengganti warna background menu tersebut

border-bottom: 1px solid black;

=============================================
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/

==============================================
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /
==============================================

Ganti kata black, white, dan #414141

Sebagai acuan, warna yang bisa anda pilih bisa lihat di link berikut:
kode warna

Update:
Berhubung ada beberapa teman yang menanyakan url target diambil dari mana, untuk sederhanya saat anda membuka sebuah halaman, bisa halaman dalam blog anda maupun blog lain, maka pada saat membuka halaman tersebut akan terlihat url target di address bar browser anda. Setiap halaman mempunyai url yang unik, artinya jika di dalam blog anda ada 100 postingan, maka ada 100 url (yang bisa dijadikan url target di menu).

Contoh url target bisa anda lihat di bawah ini:



Catatan :
Jika menu tidak berjalan dengan baik, coba letakkan script kode css di atas kode ]]></b:skin> (lihat langkah no.3)





Artikel Terkait :



42 komentar:

Ardath mengatakan...

sebelumnya salam kenal brow, saya pengen menerapkan Membuat menu navigasi (horizontal) sederhana di blog aku tapi kq gak bisa yah, ne alamatnya www.aprasya.blogspot.com.


mohon bantuannya.

terimakasih
Ardath

Artikel Komputerku mengatakan...

Mungkin script menunya tidak kompatible dengan template blog anda

kwangkxz mengatakan...

untuk kombinasi warna, bagaimana cara anda membuatnya ? saya sudah coba tapi warnanya jadi gak matching ?

adi mengatakan...

Mas sy sudah coba tipsnya n berhasil. Namun bagaimana caranya agar halaman yg baru dibuka pada tab yg sama, bukan pada tab yang baru?? Mohon petunjuknya..

Artikel Komputerku mengatakan...

@kwangkxz
Unntuk mengubah warna font, ukuran font, atau warna background template bisa lihat postingan saya:
http://artikelkomputerku.blogspot.com/2009/06/mengubah-jenis-font-dan-warna.html
@adi
Agar halaman yang baru bisa dibuka pada tab yang sama anda ckup menghapus kode: target="_blank" , Contoh:
href="http://artikelkomputerku.blogspot.com/" target="_blank"
Diubah menjadi
href="http://artikelkomputerku.blogspot.com/"

SyariF_oNLy mengatakan...

assalamualaikum...

maav mas,saya boleh nanya kan..:D

klo mau ganti warna tulisan pada menu itu gimana c,,kok klo di blog saya tulisannya jd ga kelihatan deh?
saya dah nyoba utak atik,tp masih kaya gtu juga..maklum saya blogger pemula,,jadi masih perlu banyak2 bimbingan dr senior...:)

SyariF_oNLy mengatakan...

wah akhirnya bisa berwarna juga menu saya...:D:D

thanxs yah tutorial nya ini...:)

Oca mengatakan...

Aduh makasih ya ini nih yg Oca cari. Sekali lagi makasih..

yudi anggraini mengatakan...

mumet cari artikel yg ginian eeee lha dalah malah disini ternyata.nuwon yo mas.

Cepat dapat uang mengatakan...

Untuk membuat menunya tampak di tengah bagaimana, caranya ya ?????

Artikel Komputerku mengatakan...

@SyariF_oNLy,@Oca,@yudi anggraini
Salam kenal
@Cepat dapat uang
Di kotak html/javascript pada langkah 8 coba anda tambahkan script
bagian awal <center>
bagian akhir </center>

pulsa murah mengatakan...

makasih banget bozz... dari sekian byk artikel di internet.. cuma punya yg bnr2 mudah dipahami.. dan benar2 sukses setelah ku coba.. makasih bozz..

manga mania mengatakan...

aduh,, gak ngerti

nabil mengatakan...

udah di cba sukses,cman mau posting kra2 gmana caranya bos ? apa harus editposting baru lgi ato ??????? tmbah link nabilsamudera blogspot termaksih

Artikel Komputerku mengatakan...

@manga mania
Dicoba utak-atik scriptnya, sambil belajar, pasti bisa
@nabil
Untuk buat posting baru: di dashboard pilih Entri baru, tiap2 halaman yang anda buat akan punya url (link) yang unik, cukup hubungkan url halaman tertentu dengan script html yang ada di menu horisontal

Virtual Science mengatakan...

Udah jadi menu navigasi saya tapi bingung karang, gimana carax agar postingan saya masuk sesuai menu yang ada

Artikel Komputerku mengatakan...

Jika menunya sudah terpasang, maka cukup buka halaman yang akan di jadikan traget, ambil urlnya (url yang ada di address bar browser, kemudian masukkan ke script menu atau ganti tanda # dengan url target tersebut)

Djoeragan mengatakan...

Nice info Gan...thank you . It works!!

IX-8 BLOG mengatakan...

koq sudah dua kali merubah navigasi tetap gak bisa tuch...
blog saya www.noblogandi.blogspot.com

Artikel Komputer mengatakan...

IX-8 BLOG
Saya lihat templatenya pakai template blogger design, coba pakai menu navigasi versi blue sprite,
http://artikelkomputerku.blogspot.com/2010/06/membuat-menu-navigasi-horisontal-di_21.html
Contohnya bisa dilihat disini
http://dummy-ku.blogspot.com/

Alan Travls mengatakan...

gan saya masih newbie nih,jadi situs ku nih masih brantakan.
tolong kasih sarannya donk gan?"""

kirim e'mail ke sialan.travls@yahoo.com

THX ya gan.

Anonim mengatakan...

Wah sebagai pemula saya rasa penjelasan anda mudah dimengerti mengenai cara membuat menu navigasi horisontal (sederhana)..makasi yach..skarang saya lagi pelajari artikel yang lain.

Yori

Receh Money Collector!! mengatakan...

Terima kasi info'a Mas... Ilmu yg anda bagi" kan sangat berguna bagi kami para new be..

Galuh sangpenyampai mengatakan...

sudah di add gan...tapi bagaimana cara ngilangin garis bawahnya,maaf saya baru pemula blog saya di http://sangpenyampai0.blogspot.com

Artikel Komputer mengatakan...

@Alan Travls
Blognya lebih bagus dar blog saya
@Receh Money Collector!!
Sama mas saya juga masih pemula....
@Galuh sangpenyampai
Untuk menghilangkan garis bawah menu navigasi hapus saja kode :
border-bottom: 1px solid black;

Maulida mengatakan...

maaf mganggu gan, sy ini kan pmula trus saya heran knp klo saya m'posting artikel 1 trus mpoting artikel 2 mlah bertumpuk2 "memanjang smpai kbw" knp bisa bgitu trus bgaimn crx gar artikel yg sy posting tidak btumpuk2 an bpisah antara artikel lainx

Artikel Komputer mengatakan...

@Maulida
Secara default blogger akan menampilkan 7 postingan di homepage, bisa diatur kok mbak nanti menjadi 1 atau 2 posting saja yang tampil, diposting saja bisa dilihat panduannya disini
Membuat posting baru
Memulai membuat tulisan (posting)
Mengatur postingan di homepage
Mengatur jumlah postingan di halaman utama
Untuk memenggal postingan agar tidak terlalu panjang bisa dilihat disini
Cara membuat Read more pada Blogspot versi editor terbaru (versi new editor)

usep supriadi mengatakan...

makasih

Anonim mengatakan...

sebelumnya makasih ya mas,karena aku udah berhasil buat ini,masalahnya sekarang gini

bagaimana aku bisa mengisi setiap menu tsb

mohon bimbingan

gielien mengatakan...

gan ane mau tanya ,seandai nya ita buat menu tuh
tentang SOFTWARE jadi biar masuk post tuh ke softwre harus di kelompokan gan,soal nya ane buat SOFTWARE kagak ada arsip nya gitu,
mohon pencerahan nya

Artikel Komputer mengatakan...

Mungkin bisa di atur di label, saat membuat atau mengedit postingan disamakan salah satu labelnya dengan "software", maka secara otomatis akan terkelompokkan. Coba dilihat disini
http://artikelkomputerku.blogspot.com/2008/12/004-menambah-gadget-label-pada-sidebar.html

Halid Umar mengatakan...

kok g' jdi horozontall menunya, cuma jadi vertikal gan,,

joko mengatakan...

Menunya dah bisa, tapi kog tab viewnya ga muncul bos...
nie blog sengaja buat belajar dulu
http://jogorogogroup.blogspot.com/
tolong bantuannya..

Abah Koes mengatakan...

Artikel yang sangat, sangat berharga... terutama untuk pemula seprti saya,,, terimakasih atas ilmunya,,,

dwi mengatakan...

http://free3allpengetahuanku.blogspot.com/2011/12/daftar-isi.html
blog ku yang telah mengikuti langkah

fix mengatakan...

mantaf gan ^^

Arriyadl mengatakan...

cara mengisi artikel dalam menu navigasi tersebut gmn??????

Didin Fahrudin mengatakan...

Mantaffs gan! thanks a lot... sekali-kali mampir ya gan...!

Dwijayasblog mengatakan...

Menurut aku, tutorialnya sangat jelas dan mudah diterpin.

Layanan elpiji mengatakan...

Terimakasih sudah berbagi om..

ugha anugerah mengatakan...

akhirnya nemu juga.
makasih sobb. (y)

Sutisna mengatakan...

untuk membuat sub menu pake html/java script gimana ya?..

saya coba hasilnya menumpuk...
bisa dilihat contohnya
www.corat-coret12.blogspot.com