Cara Mudah Membuat Menu Navigasi Melayang

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.

Baca -

Mengubah Breadcrumb Menjadi Menu Navigasi

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
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 >>

http://sahabatblogger77.blogspot.com/2014/03/cara-mudah-membuat-menu-navigasi-melayang.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77