Jumat, 25 Juni 2010

Highlight Navigation

Apalagi tuh maksudnya? Kalian pernah kan masuk ke situs web besar? Maksudnya situs wb yang canggih? Di beberapa situs web yang besar, pada bagian navigasinya ada sesuatu yang unik, misalnya jika memasuki halaman tertentu pada situs web tersebut, maka pada bagian navigasi akan ter-highlight. Masih belum mengerti? Coba masuk ke http://www.forumblogger.co.cc. Di sana, link "Home" akan terlihat berbeda dengan yang lainnya. Lihat screenshootnya:

Lalu masuklah ke salah satu halaman, misalnya "Info". Maka link "Info" akan ter-highlight.
Ngerti? Ingin membuatnya?

Pertama-tama anda harus membuat beberapa gambar, yaitu gambar pada link biasa, gambar pada link biasa saat mouse hover, gambar pada link highlight, dan gambar pada link highlight pada saat mouse hover (opsional). Pada contoh kali ini, link highlight pada saat mouse hover tidak ada.

Kalau sudah siap, nih langkah-langkahnya...

1. Login ke Blogger, lalu klik Rancangan > Edit HTML.

2. Backup template anda (bosan saya mengatakan hal ini lagi, tapi ini penting, kecuali jika anda sudah jago HTML).

3. Cari kode ]]></b:skin>, lalu masukkan kode berikut diatasnya.
/* Navigasi menu with highlight */
#navmenu {
height:auto;
margin:0;
width:auto; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(http://1.bp.blogspot.com/_g30iiY0E5ek/S4ofZXBjj9I/AAAAAAAAAfU/fhNrfpCKxbQ/s320/Navbgblue.jpg); /*gambar pada link biasa*/
float:left;
display:block;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000;
font-family: Verdana;
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px;
}
#navmenu li a:hover{
background:url(http://4.bp.blogspot.com/_g30iiY0E5ek/S4ofafaW2FI/AAAAAAAAAfc/GKhgv2GVVN0/s320/Navbgbluehover.jpg);/*gambar pada link biasa pada saat mouse hover*/
color:#000000;
}
#navmenu li.selected a, #navmenu li.selected a:hover{
background: url(http://3.bp.blogspot.com/_g30iiY0E5ek/S4ofcm0sIqI/AAAAAAAAAfs/Rf1rE20KlnA/s320/Navbgyellowhover.jpg)/*gambar pada link highlight*/
}
4. Lalu cari kode berikut.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Forum Para Blogger (Header)' type='Header'/>
</b:section>
</div>
5. Masukkan kode berikut dibawahnya.
<div id='navmenu'>
<ul id='navmenu'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li class='selected'><a href='http://www.forumparablogger.co.cc'>Home</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc'>Home</a></li>
</b:if>

<b:if cond='data:blog.url == &quot;http://www.forumparablogger.co.cc/p/forum-blogger.html&quot;'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/forum-blogger.html'>Forum</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/forum-blogger.html'>Forum</a></li>
</b:if>

<b:if cond='data:blog.url == &quot;http://www.forumparablogger.co.cc/p/info-forumparablogger.html&quot;'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/info-forumparablogger.html'>Info</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/info-forumparablogger.html'>Info</a></li>
</b:if>

<b:if cond='data:blog.url == &quot;http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html&quot;'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html'>About Admin</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html'>About Admin</a></li>
</b:if>

<b:if cond='data:blog.url == &quot;http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html&quot;'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html'>Kontak Admin</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html'>Kontak Admin</a></li>
</b:if>

</ul>
</div>
Ket: link-nya disesuaikan yah...

6. Kalau sudah, klik Simpan Template.

Sedikit info ringan... semoga bermanfaat dan memberi anda inspirasi...


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



9 komentar:

Gieterror mengatakan...

salam sahabat
wah perlu di coba thnxs n good luck..

Manchester United Tech mengatakan...

terima kasih atas tipsnya sob..follow balik

adib from kompinter mengatakan...

mantab aq da pke sob

Beben mengatakan...

buat baru yak...sip sip sip
gaya!!!

attayaya mengatakan...

waaah banyak blognya bro

nita mengatakan...

makasih nih ilmunya

arie... mengatakan...

mantabz bro. . .

Koje mengatakan...

wah tipsnya jelas dan mantap...!
tapi masih kurang ngerti kegunaannya :)
http://ekos06.student.ipb.ac.id

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.