4.4.14
13

Peletakan kode rancangan menu navigasi sudah biasa mbak pasti selalu didaerah HTML <div id='header-wrapper'> , apakah menu navigasi bisa kita tempatkan pada posisi dimana kita sukai mbak.?

Saya tertarik dengan menu navigasi top pada blog ini, kirim script-nya donk mbak ke email saya

Ini beberapa komentar seorang pengunjung pada salah satu koleksi menu navigasi ala SAHABAT BLOGGER 77, Menu navigasi tidak mutlak harus selalu pada elemen selector top-header, CSS dan HTML adalah kode pembentuk rangka untuk menu navigasi, serta script dan jQuery jika ingin memodifikasi dengan berbagai efek berbeda, yang semuanya itu dapat kita edit, kita ubah tanpa merusak menu navigasi yang telah ada, nah..!! lewat artikel ini komentar diatas akan saya jabarkan Bagaimana membuat dan mendesain menu navigasi, Cara peletakan menu navigasi serta beberapa pilihan koleksi menu navigasi buat sahabat semua.

Navigations meni image


Desain menu sebelumnya -

#devynav {
   font:normal 0.98em Trebuchet MS,Arial,Sans-Serif;
   margin:0 0 70px;
   background:#333;
   border-top:6px double #fff;
   border-left:10px solid #fff;
}

#devynav ul {
   list-style-type:none;
   margin:0;
   padding:0;
   height:39px;
}

#devynav li a {
   display:inline;
   margin:2px;
   float:left;
   box-shadow:0 2px 0 lime;
   -moz-box-shadow:0 2px 0 lime;
   -webkit-box-shadow:0 2px 0 lime;
   text-align:center;
}

#devynav li a:link,
#devynav li a:visited {
   font-weight:bold;
   color:#FFFFFF;
   background-color:#38f;
   padding:5px 20px;
   text-decoration:none;
   height:26px;
   margin:-0.1em 2px 0 2px;
}

#devynav li a:hover {
   background-color:lime;
   height:26px;
   color:#660000;
   box-shadow:0 2px 0 red;
   -moz-box-shadow:0 2px 0 red;
   -webkit-box-shadow:0 2px 0 red;
}



DEMO SHOW



Kode CSS menu navigasi diatas adalah salah satu rancangan model sederhana dari saya, yang sudah pasti kode tersebut terdapat juga pada template blog Anda, tidak sama tetapi kurang lebih mirip, dan kode diatas sengaja saya deklarasikan dengan susunan memanjang kebawah agar memudahkan Anda dalam peng-editan, lalu kode mana yang harus kita edit.? semua elemen yang memiliki nilai value dapat Anda ubah, Anda juga dapat menambahkan beberapa kode seperti CSS transisi, CSS text-sahadow atau efek border-radius pada link hover.

Lanjut ketahap selanjutnya tentang PELETAKAN menu navigasi
Sebelum langkah ini kita bahas, terlebih dahulu kita harus tahu bahwa untuk meletakkan sebuah objek dalam elemen HTML, Anda harus mengerti tentang di mana letak objek ini dalam tampilan browser ketika Anda sedang melihat dalam tampilan kode. Agar lebih mudah, jangan pernah tergantung dengan ID dan CLASS sebuah elemen, karena tidak semua template mengikuti standarisasi.
Contoh - elemen Header tidak selalu memiliki id='header-wrapper', tetapi terkadang juga memiliki id='top-header' atau id='ndhas-blog' (tergantung si pembuat template)


Elemen HTML

<div id='devynav'>
     <ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profile</a></li>
<li><a href='#'>Artikel</a></li>
<li><a href='#'>Forum</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Category</a></li>
     </ul>
</div>


Di mana Anda meletakkan kode ini?
Untuk Peletakan menu navigasi di atas atau di bawah header, carilah baris kode yang kurang lebih mirip seperti kode berikut-

<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'>
        <b:widget id='Header1' locked='true' title='Nama-Blog (Header)' type='Header'/>
    </b:section>
</div>


Sederhana, Jika ingin diatas header letakkan kode HTML di atas <div id='header-wrapper'>. Sedangkan jika ingin meletakkannya di bawah header, letakkan di bawah kode penutup </div>

Untuk meletakkan menu navigasi wilayah posting, carilah baris kode yang kurang lebih mirip seperti kode berikut-

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</div>


Nah..! salin kode HTML diatas, lalu letakkan kode yang kamu salin tadi di bawah <div id='main-wrapper'> Sebelum di-SAVE pratinjau terlebih dahulu, jika posisinya OK, tinggal SAVE template. Sekarang coba Anda praktekkan sendiri, namun jangan lupa back-up dahulu Template Anda untuk menghindari kesalahan peletakan kode menu navigasinya.

Semoga Tutorial ini dapat memberi Anda Inspirasi. Terimakasih..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Peletakan Serta Cara Mendesain Menu Navigasi Blog
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 >>
= TERIMA KASIH =

13 komentar

  1. jadi tahu nih, kayaknya perlu pasang di blog biar tambah keren, kunjungan rutin

    BalasHapus
    Balasan
    1. gak perlu dipasang mas,ntar nyontek donk,hehe..cukup edit saja navigasi yang ada di blognya, silahkan di utak-atik sampai mendapat tampilan yang sesuai,,
      selamat mencoba ya,
      sukses selalu

      Hapus
  2. wah ternyata mbak devi jago juga mengedit HTML,perlu belajar banyak nih

    BalasHapus
  3. ijin mempraktekannya bos, biar menu navigasinya jadi keren, hehehe...

    BalasHapus
  4. kalo tampilan blog bagus, pasti pengunjung akan betah dan menu navigasi adalah hal yang paling utama dilihat pengunjung :D, izin mempelajari mbak :D

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. mantap,, lanjutkan sharingnya ya

    BalasHapus
  7. Menarik tutorialnya nih Mbak Devy, sangat kreatif :)

    BalasHapus
  8. Sungguh, yang kayak gini-gini ini merupakan ilmu baru bagi saya....
    Makasih banyak ya, jadi belajar neh cara mendesain menu navigasi blog.

    BalasHapus
  9. makasihh mba yang cantikk :)

    BalasHapus
  10. terima kasih mbak sudah berbagi ilmunya,,_
    sangat berguna bangetd :-) :-)

    BalasHapus
  11. nah yang ini yang saya cari dari dulu nakasih ya!! :>)

    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