Highlight Navigation

Highlight Navigation
Di Posting Oleh : Admin
Kategori : Template Tips-Trik Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog
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/AVvXsEiMyVVBQ2o-WIhQJARigRFKs1QZC1GUYuac8IW3pqfVJWdXcydTp5dcNpxEln_6wriRwl50k4vPBEuCbHbX_DwK_hdD0dQCeIv-9BCi1bEgj41HY_cQ5R9eNG0_h37yYp0j4w2Hizsm2VE/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/AVvXsEj_XtFMbLjIRroC_fL8s90GQp_xDclWqSIyWUTCWimAFp8SoYzH6zFzj3qYGWh6dnjyDB34G9Lzd-m6L80lGm_xIyAI_ipKbWGAw52cjvY0bpz8K1XfK7-cEUYc_twR0QEBTPUcaqjSn64/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/AVvXsEjryf21rhhNuxeYyPwSzlg7TizL_AMhm3BuPSdMvGXIHbxxegjbZGUVekc_rUlD3d5g6e8c73woRUzUHoWsMnB2cusKjT0KO3AGJ972Me3i2t3k60CfV8usSHfGTte-vir0HuXfGAyXgkk/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...