Cara Mudah Membuat Menu Navigasi Pada Postingan - Menu Navigasi identiknya terletak dalam wilayah selector elemen tag HEADER, sehingga cara membuat terbilang mudah, karena menu navigasi bisa dikatakan sebuah diagram tabel untuk menyimpan beberapa file blog, katakanlah seperti URL beranda dengan teks HOME, profil about me dan masih banyak lagi. Akan tetapi menu tersebut dapat kita pindahkan letaknya pada postingan, sehingga saat Anda melibatkan beberapa link dalam tulisan (Internal Link) dapat kita susun menjadi sebuah menu navigasi pada postingan blog Anda seperti tombol DEMO SHOW dibawah ini




DEMO SHOW



Seperti halnya navigasi breadcrumb label pada postingan, Elemen HTML pada kode-nya dibungkus dengan tag kondisional dengan pengaturan kelas-kelas CSS yang dapat kita ubah tampilan defaultnya, begitu juga dengan menu navigasi yang dapat kita pindahkan letaknya atau merubah tampilannya menjadi lebih berwarna seperti Cara Mudah Membuat Menu Navigasi Pada Postingan yang saya ilustrasikan seperti gambar dibawah ini

Navigasi Menu Image


Menu Navigasi Sebelumnya -


Seandainya SAHABAT BLOGGER 77 ingin memberi nuansa berbeda pada postingan Anda dengan membuat menu navigasi pada postingan, berikut CSS class elemen untuk kodenya

#popnav {
  width:130px;
  margin:-3.1em 0 -3em 0;
  background-color:#362C23;
  padding:7px 15px;
  font:normal normal 11px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#A1917B;
  position:relative;
  cursor:pointer;}

#popnav:after {
  content:"";
  width:0;
  height:0;
  border:5px solid transparent;
  border-bottom-color:white;
  position:absolute;
  top:6px;
  right:12px;}

#popnav.down:after {
  border:5px solid transparent;
  border-top-color:white;
  top:13px;}

#popnav ul {
  border-top:3px solid orange;
  width:170px;
  background-color:#201A16;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin:0 0;
  padding:0 0;
  display:none;}

#popnav li {list-style:none;margin:0 0;padding:0 0;}
#popnav li a {
  padding:10px 15px;
  display:block;
  text-decoration:none;
  color:#ccc;
  font-weight:bold;
  font-size:11px;}

#popnav li a:hover {background-color:#080;color:white;}
#popnav:hover ul.fallback {display:block}


Pembangun hover fallback Menu Navigasi
Tambahkan sedikit JavaScript berikut untuk memberi sedikit efek pada tombol menu navigasinya dengan slideToggle pada selector "ul"

$(function() {
    $('#popnav ul').removeClass('fallback');
    $('#popnav').click(function(e) {
        $(this).toggleClass('down');
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
    $(document).click(function() {
        $('#popnav ul:visible').slideUp();
        $('#popnav').removeClass('down');
    });
});


Tahap Terakhir Peletakan HTML
<nav id="popnav">Model Navigasi
<ul class="fallback">
<li><a href="...URL-Anda/">Menu Navigasi 5</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 4</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 3</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 2</a></li>
<li><a href="...URL-Anda/">Menu Navigasi 1</a></li>
</ul>
</nav>


Semua kode pembangun CSS navigasi diatas tidak permanen, jadi Anda dapat mengubah letak dan warna sesuai nice blog Anda, Silahkan sesuaikan dimana letak yang Anda inginkan.


TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mudah Membuat Menu Navigasi Pada Postingan
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 =

31 komentar

  1. wah... lucu juga yia kalo ada navigasinya di tengah2 postingan, si bos ini dikasih makan apa sih, kok bisa kreatif banget...

    BalasHapus
    Balasan
    1. biar sedikit berkesan gitu bos..hehe
      hmmm..kalau masalah makanan, sama kok sama si bos masih makan nasi dan ikan asin sebagai lauknya..hehe

      Hapus
    2. saya ga makan ikan asin bos, saya kalo ga pake daging suka pegel2, hahaha...

      Hapus
  2. makasih nih, kerens sekali menu navigasinya :)

    BalasHapus
  3. izin bookmark dulu mbak,,_
    soalnya belum begitu paham maksudnya,,_
    :d :d :d

    BalasHapus
    Balasan
    1. maksudnya menu yang selama ini kita lihat di bawah atau diatas header, kini bisa dinikmati dalam postingan,tepatnya dalam tulisan artikel ada menu navigasi..gitu mas,,hehe

      Hapus
  4. Barusan dah liat demo shownya mbak, keren banget duah....
    saya mah gak paham kalo masalah kode-kode begini, makasi ya atas sharingnya :)

    BalasHapus
    Balasan
    1. saya juga dulu belum begitu paham kok mas,tetapi terus belajar jadi sedikit mengerti sekarang hhee

      Hapus
  5. Patut dicoba nih mbak (h) hehehe

    BalasHapus
  6. keren gan navigasi nya .. :D

    BalasHapus
  7. Menu navigasinya di postingan :D
    ngga seperti biasanya nh mbaa..

    BalasHapus
    Balasan
    1. mau mencoba sensasi saja mas,,hehe

      Hapus
  8. Sangat kretif mba. Kapan2 saya izin coba yah mba. Makasih atas tutor nya. :-)

    BalasHapus
  9. Kreatif teh.. tapi jarang sih ya liat post yang pake menu navigasi di dalamnya

    Btw, aku juga pake emoticon kyk gini.. tapi kok nggak muncul di semua media ya? aku pake laptop muncul, tapi pake pc nggak muncul

    BalasHapus
    Balasan
    1. jika saya membuat postingan yang melibatkan banyak internal link, saya selalu menggunakan cara ini mas, karena link tidak terbaca oleh peramban sebagai pemadatan kata kunci sehingga sedikit terhindar dari content spam internal link,
      pada artikel ini http://sahabatblogger77.blogspot.com/2014/04/membuat-koleksi-gambar-hover-efek-zoom-right.html salah satunya

      layar monitor PC atau komputer tidak semua ukuran sama mas, ada yang 10" sampai 15", jadi tambahkan kode untuk pengaturan media layoutnya agar laman dapat responsive

      Hapus
  10. ternyata ditengah-tengah postingan juga bisa di kasih menu navigasi seperti ini ya mbk. jadi tambah cantik deh. hehe

    BalasHapus
    Balasan
    1. kurang lebih begitu mas, cara ini sering saya gunakan untuk menyembunyikan link jika terlalu banyak yang harus disertakan dalam postingan, sehingga terlihat sedikit rapi tulisan pada postingan

      Hapus
  11. wah keren banget mbak navigasi bisa tampil di area postingan, harus dicoba nih... selain bikin postingan keren hal ini juga membuat postingan seo friendly ya mbak krn ada artikel terkait di area postingan x-)

    makasih sharingnya (f)

    BalasHapus
  12. dengan dikasih navigasi kayak gini, pasti artikel kita menjadi lebih menarik ya...

    BalasHapus
  13. liat demonya
    emang keliat jd menarik ya :)

    BalasHapus
  14. saya baru tahu ternyata menu navigasi bisa juga dipakai di postingan, saya taunya bisa untuk daerah header saja @-)
    benar2 keren...mungkn nanti bisa saya coba terapkan, terima kasih sob sudah share

    BalasHapus
  15. salam kenal gan
    artikel yang sangat menarik dan bermanfaat gan
    lanjutkan terus gan

    terima kasih

    BalasHapus
  16. Wah boleh juga nih dicoba-coba, makasih neng udah berbagi ilmunya, ^.^

    BalasHapus
  17. mbak situs saya kok ndak bisa dimasukan css nya.tolong cek dong.@-)

    BalasHapus
    Balasan
    1. pada template-

      bentangkan semua slektor kode pada template blog agan, letakkan CSS diatas kode ]]></b:skin> atau <style>

      contoh-

      [pre]<style>
      ...
      kode CSS disini
      ...
      </style>
      //setelahnya letakkan kode HTML setelahnya jika menyisipkan langsung pada postingan[/pre]

      saya pernah membuatnya Disini

      Hapus
  18. postingan ny sangat menarik mbak devy
    tapi mohon maaf mbak,
    saya tlat mncobanya bbrapa kali, tapi ndk bisa2, mohon bantuannya tntang dmanakah kode css dan html nya harus di pastekan
    trimakasih

    BalasHapus
    Balasan
    1. carai kode ]]></b:skin> pada template, lalu letakkan kode CSS diatas tepat diatasnya

      selanjutnya letakkan kode HTML pada postingan Anda mode tulis HTML (bukan Compose)

      Hapus
  19. mbak, saya sudah buat kolom-kolom navigasi, trus masukin artikel dan mengelompokkan artikel dalam masing-masing kolom sesuai kategori nya gimana ya???
    makasih...

    BalasHapus
    Balasan
    1. <li><a href='Link-Anda'>Teks Link</a>

      sesuai dengan masing-masing area tag <ul>

      Hapus
  20. maksutnya kode itu saya sertakan waktu saya postingkan artikel baru atau gimana kak?
    maaf, saya newbie
    hehe
    :))

    BalasHapus
    Balasan
    1. umumnya bentuk menu navigasi diatur dalam rangka diagram kelas-kelas element seperti ini:

      <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
      </ul>

      Dengan sub-menu

      <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <ul class="sub-menu">
      <li><a href="#">Menu 3.1</a></li>
      <li><a href="#">Menu 3.2</a></li>
      <li><a href="#">Menu 3.3</a></li>
      </ul>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
      </ul>


      perhatikan simbol pagar ( # ), ganti simbol itu dengan URL-Anda, bukan hanya untuk Menu navigasi pada postingan, tetapi semua bentuk menu navigasi akan berbentuk dengan element seperti itu

      Hapus

  • 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