Cara Mudah Membuat Menu Navigasi Melayang - Walau menu navigasi merupakan sebuah widget tambahan untuk blog, namun widget ini sangat banyak manfaatnya, terlebih jika blog anda bertemakan tutorial atau online shop, karena didalam menu navigasi tersebut boleh anda tambahkan beberapa menu atau label-label artikel dalam blog anda, karena saat halaman posting di-scrool menu navigasi ini tetap stay pada posisinya (menu navigasi tidak ikut tergulung), dan pengunjung bisa dengan leluasa untuk menentukan pilihan menu mana yang akan mereka kunjungi.

Tidak jauh berbeda dengan metode pembuatan navigasi breadcrumb melayang pada artikel sebelumnya, pada menu BREADCRUMB saya hanya memindahkan posisinya menjadi melayang diatas Header blog dengan satu tambahan menu list DAFTAR ISI model icon selected disebelah kanan menu, dan kesempatan kali ini menggunakan metode yang sama, hanya saya akan memberikan dua posisi  menu navigasi DIATAS atau DIBAWAH jendela yang dapat anda pilih.

Navigasi menu fixed


Baca -


Tentukan posisi pilihan Menu navigasi Anda, kemudian Copy salah satu CSS berikut, lalu letakkan sebelum atau diatas kode ]]></b:skin> pada Template Anda



DEMO SHOW



CSS for
MENU NAVIGASI MELAYANG POSISI ATAS
#hompager {position:fixed;z-index:1000;top:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#3d85c6;border-bottom:2px solid green;text-align:left;-webkit-box-shadow:0 0 7px red;-moz-box-shadow:0 0 7px red;box-shadow:0 0 7px red;}
a .ikon-beranda {display:block;background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);}
.float-right {float:right;width:100px;margin-right:13px;}
.float-right span {display:block;float:right;margin-right:2px;}
a .ikon-kiri {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-kanan {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-beranda:hover,
a .ikon-kiri:hover,



CSS for
MENU NAVIGASI MELAYANG POSISI BAWAH
#hompager {position:fixed;z-index:1000;bottom:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-top:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;}
a .ikon-beranda {display:block;background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);}
.float-right {float:right;width:100px;margin-right:13px;}
.float-right span {display:block;float:right;margin-right:2px;}
a .ikon-kiri {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-kanan {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);}
a .ikon-beranda:hover,
a .ikon-kiri:hover,
a .ikon-kanan:hover {opacity:1;filter:alpha(opacity=100);}
#blog-pager {display:none !important;}



Setelah itu temukan kode ini:  <a expr:name='data:post.id'/> 

Letakkan kode ini di atasnya:

HTML
<div class="hompager" id="hompager">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" title="Home"><span class="ikon-beranda"></span></a>
<div class="float-right">
<b:if cond="data:olderPageUrl">
               <a expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-older-link&quot;" href="https://www.blogger.com/null" title="Artikel Selanjutnya"><span class="ikon-kanan"></span></a>
          </b:if>
          <b:if cond="data:newerPageUrl">
               <a expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-newer-link&quot;" href="https://www.blogger.com/null" title="Artikel Sebelumnya"><span class="ikon-kiri"></span></a>
          </b:if>
     </div>
</div>

Simpan template Anda

Sebagai tambahan pada menu navigasi ini, saya menempatkan NEXT POST (Artikel Selanjutnya) dan PREV POST (Artikel Sebelumnya) sebagai tambahan menu, yang sudah saya ganti menjadi Icon TANDA PANAH

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mudah Membuat Menu Navigasi Melayang
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

8 komentar

  1. terima kasih infonya, kapan-kapan saya coba belum ada waktu nih buat coba.

    BalasHapus
  2. mantab pagi pagi dah di kasih materi melayang hehehe makasih mbak devy

    BalasHapus
  3. Bagus juga untuk menu yang banyak label, ya mbak. bagaimana untuk label yang sedikit seperti blognya Uda? Terima kasih tutorialnya mbak Devi. Kita coba juga deh.

    BalasHapus
  4. Wah tinggal kopas dan edit saja nih kode nya, hehehe :D

    BalasHapus
  5. keren juga ya sob bisa bikin menu yang melayang-layang. ane jadi kepingin nyobain nih. makasih sobatku

    BalasHapus
  6. keren nih mbak, bener-bener ahli dalam bidang memodifikasi blog, keren makasih atas ilmunya.

    BalasHapus
  7. makasih ilmunya mampir ya ke http://solusi-qta.blogspot.com

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK