Peletakan Serta Cara Mendesain Menu Navigasi Blog

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.

Desain menu sebelumnya -

Daftar Artikel Terbaru Dalam Menu Navigasi

#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..!!