Membuat Menu Navigasi Image

Navigasi merupakan penentuan posisi & arah tujuan, baik di medan sebenarnya atau di peta (Wikipedia). Dalam blog, kita bersama mengenal istilah sitemap yang mungkin dapat kita hubungkan dengan peta. Navigasi dalam blog bertujuan untuk memberikan kemudahan bagi pengunjung menemukan tujuan konten yang ingin ia cari (baca:red).

Berbagai jenis menu navigasi dapat Anda sematkan dalam blog, seperti: navigasi horizontal, vertikal, dan sebagainya. Termasuk menu navigasi dengan image (gambar) yang akan kita review sekarang ini. Bagaimana bentuk dari navigasi yang saya maksud, silakan klik link ini blog versi demo. Coba perhatikan kumpulan gambar di sebelah kanan blog demo tersebut! Navigasi image akan terus bergeser mengikuti arah scroll mouse ke atas dan ke bawah (fixed).

1. Letakkan kode CSS berikut di atas ]]></b:skin>.

/*-- NAV IMAGE --*/
#nav-image {
right:4%;
position:fixed;
top:33%;
padding:0 6px;
overflow:hidden;
}

.linkopacity img {
filter:alpha(opacity=25);
-moz-opacity:0.3;
opacity:0.3;
border:0;
}

.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
border:0;
}

.to-home, .table-of-content, .back-to-top, .to-subscribe, .to-comment, .back-to-down {border:0; margin:1em 0;}

Catatan:

Kode yang berwarna merah dapat Anda rubah, sesuai dengan karakter blog Anda.
Jika Anda ingin meletakkannya di sebelah kiri, ganti right:4%; menjadi left:4%;.
Semakin kecil nilai opacity atau -moz-opacity (warna hijau) — nilainya berkisar antara 0 – 1 — maka image semakin blur (baca:kabur).

2. Letakkan — atau tidak — jQuery berikut di atas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#content], a[href*=#comments-block], a[href*=#footer-content]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>

JQuery di atas hanya akan menampilkan scrolling yang lembut, ketika link dalam image kita klik. Kemudian untuk kode jQuery yang berwarna merah merupakan link - link tujuan dari navigasi image. Attention! Mungkin template yang satu berbeda dengan lainnya, dimungkinkan pula untuk merubah kode yang berwarna merah (#content, #comments-block, #footer-content).

3. Letakkan kode HTML berikut di atas </body>.

<figure id='nav-image'>
<div class='to-home'>
<a class='linkopacity' href='isi dengan alamat blog Anda…' title='Halaman Utama'><img alt='Home' height='30' src='https://lh6.googleusercontent.com/_sl-hvfgWCfI/TXaFG5_UosI/AAAAAAAAABU/tEReYbtwo4w/home.png' width='30'/></a>
</div>
<div class='table-of-content'>
<a class='linkopacity' href='isi dengan alamat blog Anda…/search?max-results=200' rel='nofollow' title='Daftar Isi'><img alt='Content' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAcxFVyAvWOzIwXVOmVrlAj6nJ2oQFy1Cd7ZkW1f5w9yNzJsHvQgXTujnVwpSIgOi9ZFZhklTZGN3fZkI4xCUgT4PLwWqZXaTfqbrUcHP6SihacFo7haQepdoQFj2_Mk7Eoy_mq26Y0OY/s800/arsip.png' width='30'/></a>
</div>
<div class='back-to-top'>
<a class='linkopacity' href='#content' title='Ke Atas'><img alt='Up' height='30' src='https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHPH5nuI/AAAAAAAAABY/UtBQNUtekmA/arrow-up.png' width='30'/></a>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='to-comment'>
<a class='linkopacity' href='#comments-block' title='Komentar'><img alt='Comment' height='30' src='https://lh3.googleusercontent.com/_sl-hvfgWCfI/TXaFHgfaC9I/AAAAAAAAABg/0FmVG-_r7p4/comment.png' width='30'/></a>
</div></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='to-subscribe'>
<a class='linkopacity' href='isi dengan alamat RSS blog Anda…' title='Langgan RSS'><img alt='Langgan RSS' height='30' src='https://lh5.googleusercontent.com/_sl-hvfgWCfI/TXaX0fGJIPI/AAAAAAAAABw/aZqTbkdIeQI/RSS.png' width='30'/></a>
</div></b:if>
<div class='back-to-down'>
<a class='linkopacity' href='#footer-content' title='Ke Bawah'><img alt='Down' height='30' src='https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHSoQCxI/AAAAAAAAABc/evR8CjwFCFQ/arrow-down.png' width='30'/></a>
</div>
</figure>

Catatan :

Perhatikan kode yang berwarna merah (HTML = JQuery )!
Silakan rubah — atau tidak — alamat image (warna hijau) sesuai dengan alamat penyimpanan image Anda.
Sesuaikan height & width dengan besar - kecilnya gambar yang Anda inginkan.
Kode yang berwarna biru silakan buka kembali posting tentang “optimasi tampilan widget”.
Jangan dilupakan! Bagi blog yang menggunakan image sebagai media bacanya, sebaiknya selalu menambahkan atribut alt='…' dan title='…'.

Demo Navigasi Image

Semoga bermanfaat trik membuat menu navigasi image ini.