My Blog List

Wednesday, May 27, 2009

Vertical Navigation Bar


compassNavbar atau kepanjangan dari navigation bar merupakan suatu alat yang berguna untuk mengarahkan sesuatu. Dalam dunia blog/web, alat ini berfungsi untuk mengeksplorasi isi dari suatu blog. Pertanyaan yang terlintas didalam benak saya pertama kali mendengar istilah tersebut yaitu mengapa perlu alat tersebut? Ternyata alat tersebut memiliki efek yang cukup untuk diperhitungkan.  Blog yang memiliki banyak content atau isi pasti tidak memungkinkan untuk ditampilkan keseluruhannya dalam halaman utama atau kalau pun dipaksakan hasilnya.......web kita akan memiliki loading time yang significant cukup lama. Biasanya orang banyak menggunakan navigation bar (navbar) dalam style horizontal atau mendatar, seperti dibawah ini:

horizontal navigation bar
Ketika saya jalan-jalan untuk mencari sumber inspirasi dalam mempercantik blog-ku, kutemukan script untuk membuat navbar (navigation bar) dalam bentuk yang berbeda. Orang menyebutnya drop down. Saya gunakan dalam blog ini. Sobat bisa melihatnya di sidebar, seperti ini:

Ketika ada pengunjung yang ingin mengeksplor lebih jauh, hanya dengan sentuhan satu jari lentiknya maka akan terurai tabir blog ini. Selain itu juga style ini saya gunakan untuk menyembunyikan widget atau asesoris yang tidak terlalu penting. Mengapa saya sembunyikan????? bukannya untuk mempercantik blog....??? Widget memang salah satunya berfungsi untuk mempercantik blog. Namun kalau kebanyakan & layout template kita terbatas, hasilnya blog kita akan memiliki struktur yang tidak karuan.

Untuk menggunakan trick ini, ada beberapa langkah yang harus dikerjakan.
1. Download link disamoing. "package". Didalamnya terdapat script dan gambar yang akan digunakan dalam mengaplikasikan trick ini.

Kemudian upload script dan gambar tersebut.

2. Copy and paste kode berikut kedalam template sebelum kode </head>. Pastikan untuk mengganti kata-kata "your Script URL" dengan alamat script yang telah diupload.

3.Copy dan paste kode dibawah ke dalam template sesudah kode ]]></b:skin> dan sebelum kode </head>.


Ada beberapa kata yang harus diganti sebelumnya. Kata-kata tersebut yaitu: plus.gif, minus.gif, glossyback.gif, dan glossyback2.gif. Ganti dengan url dari gambar yang telah diupload, dan SAVE.


4.Masuk kedalam layout template dalam blogger account, click "Page Element" dan kemudian click add a gadget. Click "HTML/Javascript" option. copy dan paste kode dibawah ini.


Ganti dan sesuaikan dengan keinginan dan maksud sobat. Jangan lupa untuk  untuk menyimpan hasil edit-nya.
Kemudian lihat hasilnya.
Salam

tipsandcara

Print this post
Bookmark this post:
StumpleUpon DiggIt! Del.icio.us Blinklist Technorati Reddit


7 comments:

[+/-]Click to Show or Hide Old Comments

admin on May 28, 2009 at 9:50 AM said...

bos aku bingung yg mana sih tuk URL itu dah aku coba dari image yg di upload. tolong donk yg mana aja yg diganti...

Seti@wan Dirgant@Ra on May 28, 2009 at 12:49 PM said...

Aku coba yang ini juga yah bro,....
makasih buanyak atas emailnya.
Aku belum paham cara postingnya.

Rinto on May 29, 2009 at 3:06 AM said...

siiiip kang...

Yummy on May 29, 2009 at 11:41 AM said...

hi fren, ada award khusus untuk anda, silahkan diambil di blog saya. terimakasih

MU Fans on May 31, 2009 at 2:13 AM said...

Bagus ya navigasi bar-nya....tp aq dah sempat pake yg ini...

Septian Danu S on July 2, 2009 at 11:00 PM said...

bos, aku koq gagal y.. di step ketiga malah ada peringatan dari bloogger, XML kurang tepat, entryty harus di ikuti dengn "&" duwh gmn y?

Beben on July 8, 2009 at 8:43 PM said...

aku mah koment kemana aja aaaahhhhh...OM OM itu ada tulisan yg didalam Blog Directory yg dikanan itu loh diatas my reference itu loh, ada satu tulisan Blog Catalog>, kok ada kurung closetnya yah (ehhh closet = tutup) huehuehuehuehuheuh....emang disengaja gitoo apa lupa delletenya tuhhh hohohohohoh piss aaaaaaaaahhhhh

[+/-]Show or Hide Comments

Post a Comment

My Banner

Loud Launch Site Disclosure Statement

I have received financial compensation for some of the posts on your blog (in keeping with current FTC Regulations) as some posts are paid posts.
 

Copyright 2009 All Rights Reserved Magazine 4 column themes by One 4 All