Cara Membuat Menu Navigasi Bar Sederhana

Cara Membuat Menu Navigation Bar Sederhana Seperti Blog Saya - Sesuai dengan janji saya, saya akan membuatkan postingan tentang cara membuat navigation menu. Navigation Menu atau Menu Navigasi ini adalah sebuah tab yang berisikan link atau bahasa kerennya Shortcut ini berfungsi sebagai penunjuk arah tentang apa saja yang blog anda promosikan atau sebaliknya. Biasanya ini digunakan dan ditaruh di header blog atau dimana saja. Screenshotnya bisa dilihat dibawah :

Pengen ? Liat cara dibawah :

1. Login ke blogger
2. Masuk ke Rancangan >> Edit HTML
3. Cari kode ]]></b:skin> lalu paste-kan kode berikut diatasnya

/* Menu Navigasi Sederhana Blog Gunk - D Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Menu Navigasi Sederhana Ends */

4. Save Setelah Itu
5. Lalu masuk ke Elemen Laman >> Tambah Gadget >> HTML Javascript
6. Paste-kan kode script berikut

<!-- Menu Navigasi Sederhana http://gunkdephoenix.blogspot.com Starts -->
<div id='burasbar'>
<a class='burastabs' href='#'>Home</a>
<a class='burastabs' href='#'>About</a>
<a class='burastabs' href='#'>Tutorial</a>
<a class='burastabs' href='#'>Widget</a>
<a class='burastabs' href='#'>Mobile</a>
<a class='burastabs' href='#'>Facebook</a>
<a class='burastabs' href='#'>Twitter</a>
<a class='burastabs' href='#'>Advertise</a>
</div>
<!-- Menu Navigasi Sederhana Ends -->

7. Jika semua sudah OK, Tinggal Di Save

Nb :
Jika kesulitan ingin menempatkan navbar ini, ganti saja Script Navbar Sobat yang dulu dan paste-kan kode Script yang tadi
Ini adalah kode yang sebelumnya ada pada Navbar saya :

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

<div class='menuhorisontal'>
<ul>
<li><a href='#'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOsD_tW8jGxS6sjwt0yCYt6qnligr0VUIeZ9AVwIq9zxMdnQJGvKXsQrKPD5L_sdrsyD38FN5JHWemEuMjx9bOoJNqP6jBoDbWp0mT27lL3xwh6LsqKpVNSU4y5gr3ZL7gUC-2zPX4h89y/s200/icon-home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Ukiran Gembol Jati</a></li>
<li><a href='#'>Buah Naga</a></li>
<li><a href='#'>Blogging</a></li>
<li><a href='#'>Pro Blogger Template</a></li>
<li><a href='#'>UkiranJati.com</a></li>
<li><a href='#'>RSS Post</a></li>
<li><a href='#'>RSS Comment</a></li>
</ul>
</div>

    <div id='content-wrapper'>
      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

Kode yang berwarna merah saya ganti dengan kode script yang tadi

Selamat Mencoba!
Enjoy Nge-Blogging !

Tweet