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/AVvXsEhG-FntUS0ZIMq4r5AuwN_f-0SYJ4dYunoWLU87_hqRbtwdZIatJnXvePAsrZ_F4FfrJM1yynXy073xDbbEOApY17KfJ40fPHS9PQXgdcU_lwgY97R63bcNXEdq-G_fOXEFBhc9mXgKh14/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/AVvXsEgCpeNduy0_q0swBXPSHbZkZYBe-CgFpzdPolMygDaH8oSdKp1i9e9ggJ4UoZ_4B9RxPrActqVWmnccATce8AMGkrUNOSYUk5HIRLXMPi5Qzhz8i36PuTwjRBjUZd0uA9Gz1OEzXALf2oc/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/AVvXsEiZuhHeR72ue-yN8IalRR06rA6-4NI-tRYG-XXDVjkm8UV_GanbmY-wT0kCGHMkSHPYVAQlfqzMb70y18PY7DCpU9rBW6OQ3vg_M55YSzJ6CjJkz-EKRDpQLI2ox0fXn4QbUKV8hLfhIxU/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...

Komentar

Posting Komentar

Postingan populer dari blog ini

Habisnya Era Media Cetak, dan Selamat Datang Era Media Elektronik?

Saya berjalan-jalan di sebuah toko buku dan bertanya "Dimana ya Majalah FourFourTwo?". Seorang perempuan menjawab "FourFourTwo sudah tidak terbit lagi". Saya pun terkaget. Majalah seperti itu sudah tidak terbit lagi? Seminggu sebelumnya saya hendak membeli tabloid Soccer, dan saya bertanya kepada si penjual. "Soccer?" Kata si penjual: "Succer udah nggak terbit lagi mas". Saya terkejut. Setahu saya Tabloid Socecer mempunyai basis penggemar yang masif dan pelanggan yang lumayan banyak, kok bisa-bisanya berhenti terbit? Karena penasaran setelah kejadian FourFourTwo saya buka mbah google. Ternyata benar, kedua media yang membahas sepakbola (ya, saya memang penggemar sepakbola) tersebut sudah berhenti terbit. Kalau Fourfourtwo berubah menjadi portal berita online (cek di http://fourfourtwo.com), situs Duniasoccer (http://duniasoccer.com) malah sudah tutup. Memang ini salah saya juga, saking sibuknya di dunia nyata, mungkin sampai tidak tahu bahwa kedu...
Baca selengkapnya

Review Hotel.co.id Situs Cari Hotel Murah Terbaik Di Indonesia

Gambar
Cari info mengenai hotel murah dan terbaik penting untuk yang kerap melancong dan tidak ada rumah rekan atau keluarga untuk tempat bermalam sesaat. Untuk dipahami, sekarang ini cari hotel paling dekat sangat gampang karena ada hotel.co.id situs cari hotel murah terbaik. Saat kamu sedang melancong dan harus tinggal beberapa saat pada sebuah wilayah yang didatangi sudah tentu yang dicari ialah hotel untuk tempat bermalam. Tapi, saat sebelum berkunjung sebuah hotel untuk bermalam, kemungkinan kamu dapat cari info berkaitan hotel yang hendak kamu datangi untuk bermalam. Info yang diperlukan minimal berkenaan harga dan kwalitasnya. Lalu, bagaimanakah cara ketahui info berkaitan mengenai hotel yang hendak kamu datangi? Adakah service yang sediakan info mengenai hotel selengkapnya? Sudah pasti ada, namanya ialah Hotel.co.id Nach, apa kamu ingin tahu seperti apakah feature dan kelebihan basis ini sebagai situs pencarian hotel paling murah dan terbaik . Untuk ketahui jawabnya, baca info secara ...
Baca selengkapnya

Logika Matematika - Part 4

Agak lama updatenya ya? Dan sayajuga mengucapkan selamat kepada Timna Jerman yang berhasil menjuarai Piala Dunia 2014 (buset udah telat banget) Untuk melihat eidsi yang sebelumnya: Logika Matematika - Part 1 Logika Matematika - Part 2 Logika Matematika - Part 3 Pada edisi keempat sekaligus terakhir ini akan dibahas meengenai penarikan kesimpulan. Ada 3 cara penarikan kesimpulan dalam logika matematika, yaitu: 1. Modus Ponens Jika diketahui premis p → q dan diketahui premis p, maka kesimpulannya adalah q Contoh: Diketahui: Jika hari ini hari senin maka disekolah ada upacara bendera. Dan juga diketahui: Hari ini hari senin. Maka kesimpulannya: Disekolah ada upacara bendera. 2. Modus Tollens Jika diketahui premis p → q dan diketahui premis ~q (ingkaran q), maka kesimpulannya adalah ~p Ini sesuai dengan sifat kontraposisi yang senilai dengan implikasi (Lihat Part 2) Contoh: Diketahui: Jika hari ini cerah maka jalanan akan macet. Dan juga diketahui: Jalanan tidak macet. Maka kesimpulannya: ...
Baca selengkapnya