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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwExPbQ07nCzFngzCpBLMy4ibghudGifn2xUUaU53vat6NurCpMeFgqEkEdi4GbEqFm3S0mBNMqq2gtMOsDWZx1tJMiDf-__OJuSMHAbsI1sa4kWQ8RegZuIVFsNU05OdreM_1U9PVMjc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbGPYiXlPVAjMQRoje_W2ah5mJ8nkHjLquh7iDpZpfHN61yPBOtP91fgWcJig6IckM_X73r7YAbqzOI_hidVH3xkHhns0VglfXNiLZ01emu6PFgwiMiy9M2r0id2m3KZqoaNGO_rh-SI/s320/Navbgbluehover.jpg);/*gambar pada link biasa pada saat mouse hover*/
color:#000000;
}
#navmenu li.selected a, #navmenu li.selected a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQID9i9lY7yT7id5CcYV0qJqD6iU02zh_mAvjdCXsrwpIo5gUtokSZzODUYFTUn8pacQHOfPfzVN8QVV0Ml5KQIKuGZqEkj7C9By8SIhvRs4qR_lGHnuH5HD70Pix5EvRu7Kim7G2VDcs/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.

Artikel Menarik Lainnya