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://lh3.googleusercontent.com/_w3vbLlHM5kg/TZEq7s1bzTI/AAAAAAAAA5k/3r2G0Keni6E/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.

14 komentar untuk “Membuat Menu Navigasi Image”

  1. sudah di coba apa belum ya gan tipsnya ini, untuk lebih bagusnya sih agan coba dulu lalu tampilkan hasil printout-nya sebagai gambar agar kami para pengunjung lebih jelas..salam kenal !!!

    BalasHapus
  2. @Hori Revens & @rahmat_netral:
    Trik di atas udah disertai blog versi demo-nya, gan. Coba agan perhatikan paragrap ke dua, kalimat, “…yakni seperti yang tampak pada blog versi demo ini”.

    Bukankah lebih jelas, gan. Jika disertakan blog demo, ketimbang menampilkan gambar printout - nya.

    BalasHapus
  3. thanks for Info n Article nya salam kenal gan..
    good luck always

    BalasHapus
  4. wahh, ane coba dl boos, semoga berhasil, makash buat infonya yah >>> salam knal


    blogger pemula | catatan tak berarti

    BalasHapus
  5. Thanks gan Info n article nya Ku coba ahh,
    Inzin Belajar gan

    BalasHapus
  6. Gambar di sidebar kanan hilang bos jadi nggak bisa lihat demonya.

    BalasHapus
  7. @CROCS Murah:
    Demonya bukan di sini, gan. Tapi di blog demo lain, coba klik link blog demo tersebut. :)

    BalasHapus
  8. great post! thanks atas sharingnya bos, it really useful for me..

    BalasHapus
  9. thanks gan....boleh di coba kebetulan saya lagi cari bagaimana caranya pasang sitemap.

    BalasHapus
  10. Blog ini memang cocoknya untuk para blogger yang suka otak-atik html codes, kalo saya sih yang tipe praktis aja, soalnya blogger udah ada fitur template creator

    BalasHapus
  11. sedikit nambah bang kalau menu navigasi udah ada di template bawaan mending ubah aja style dari pada nambah di atas ]]> hehe

    BalasHapus