Cara Membuat Navbar Dropdown di bawah Header

Berikut ini saya akan bagikan bagaiamana cara membuat navbar dibahwa header.mungkin kalau kita lihat di blog terkenal atau master-master blog pasti dibawah header tamplate dipasang yang namanya dropdown menu atau navbar menu. karena navbar dropdown sendiri mempunyai karakter keren, simple dan tentunya akan mempermudah pengunjung untuk melihat apa saja yang ditampilkan di blog tersebut.
Navbar dropdown yang aku share ini seperti navbar dropdown yang berada di blog Gema Santri, kalau ingin lihat silahkan klik disini. sebenarnya sudah banyak blog-blog yang membahas tentang tutorial cara membuat navbar dropdown. namun sehubungan ada salah satu sobat saya yang tanya cara mmebuat navbar menu ini terpaksa saya postingkan karena tidak mungkin kalau menjelaskan dengan handphone, malah ngluarin biaya yang tak karuan nantinya hehehehe...langsung saja yuk...kita mulai...namun silahkan lihat dulu tampilan navbar menu yang saya share hari ini dibawah.
Navbar Dropdown-Giga Watt
seperti gambar diatas itu yang saya ingin bagi. mari kita mulai
1. silahkan login dulu ke Blogger.
2. kalau sudah silahkan langsung menuju ke Edit HTML dan jangan lupa untuk membackup tamplate atau unduh tamplate kalian sebelum proses ini dimaulai caranya silahkan lihat gambar dibawah.
Navbar Dropdown-Giga Watt
kalau sudah kalian berada di menu Edit Tamplate silahkan lihat menu yang berada di kanan atas (Cadangkan/Pulihkan) seperti panah di atas silahkan klik maka akan terbuka menu kayak dibawah ini.
Navbar Dropdown-Giga Watt

silahkan kalian klik Unduh template lengkap lalu simpan di hard drive kalian seperti yang ditunjukkan panah warna hitam. kalau yang berwana merah untuk mengembalikan template kalian kalau terjadi kegagalan dalam mengedit lengkap. caranya silahkan klik tulisan telusuri terus cari dimana tadi sobat menaruh tamplate, kalau sudah ketemu silahkan klik Ungggah. cara seperti diatas harus sudah bisa dilakuakan oleh seorang blogger karena hal ini bersifat wajib dan makanan yang harus dilakukan oleh seorang blogger. kalau kalian sudah paham cara backup tamplate dan cara upload tamplate mari kita lanjutkan tutorial cara Cara Membuat Navbar Dropdown di bawah Header.
3. kalau sudah kalian lakukan silahkan centang expant tamplate. kalau sudah kalian centang silahkan kalian cari kode seperti ini ]]></b:skin>.
4. kalau sudah kalian dapatkan kode kayak diatas silahkan taruh kode dibawah ini tepat diatasnya.
Buka Kodenya >>
/* -----   SUBNAV GIGA-WATT.BLOGSPOT.COM   -----  */

#subnav {
    clear: both;
    width: 978px;
    height: 29px;
    background:url(http://2.bp.blogspot.com/-kXspYilhflg/TgIelo03VtI/AAAAAAAAAYQ/iHIX2IGIi2s/s1600/navhov.gif) repeat-x;
    color: #000;
text-align: left;
border: 1px solid $linkbarmainBorderColor;
    margin: 0;
    padding: 0;
    }

#subnav .wrap {
    }
   
#subnav ul {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 3px;
    }
   
#subnav li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
   
#subnav li a {
    color: #fffff;
    display: block;
    font: $linkbarTextFont;
    margin: 0;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
text-align: left;
    position: relative;
    }

#subnav li a:hover, #subnav li a:active, #subnav .current_page_item a {
    background:#979797;}

   
#subnav li a.sf-with-ul {
    padding-right: 10px;
    }   
   
#subnav li a .sf-sub-indicator {
    background: url(images/arrow-down.png);
    display: block;
    width: 10px;
    height: 10px;
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    top: 11px;
    right: 5px;
    }
   
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background:#979797;
    color: #ffffff;
    width: 150px;
    font: $linkbarTextFont;
    margin: 0;
    padding: 6px 10px 6px 10px;
    position: relative;
    }
   
#subnav li li a:hover, #subnav li li a:active {
    background:#979797;
    }

#subnav li li a .sf-sub-indicator {
    background: url(images/arrow-right.png);
    top: 5px;
    }

#subnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 180px;
    margin: 0;
    padding: 0;
    }

#subnav li ul a {
    width: 160px;
    }

#subnav li ul a:hover, #subnav li ul a:active {
    }

#subnav li ul ul {
    margin: -33px 0 0 179px;
    }

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfHover ul ul, #subnav li.sfHover ul ul ul {
    left: -999em;
    }

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfHover ul, #subnav li li.sfHover ul, #subnav li li li.sfHover ul {
    left: auto;
    }

#subnav li:hover, #subnav li.sfHover {
    position: static;
    }
kalau sudah kalian taruh silahkan sesuaikan lebar dari navabar yang kalian inginkan kode warna merah diatas yang kalian ganti, kalian bisa lihat lebar templat kalian di kode seperti ini.
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px;
width: 978px;
height: 250px;
border: 1px solid $headerBorderColor;
}
warna merah diatas lebar dari template kalian. tentu sekarang sudah paham ya...kalau sudah paham kita lanjutkan lagi.
5. temukan kode kayak ini. <div id='content-wrapper'> kalau sudah kalian menemukan kodenya silahkan taruh kode dibawah ini tepat diatasnya.
Buka Kodenya >>
<div id='subnav'>
  <div class='wrap'>
    <ul class='nav superfish'>

      <li><a>Menu 1.1</a>
<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>
</li>

<li><a>Menu 1.2</a>
<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>
</li>
<li><a>Menu 1.3</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
</ul>
</li>
      <li><a>Menu 1.4</a>
<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>
</li>
      <li><a>Menu 1.5</a>
<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>

</li>
<li><a>Menu 1.6</a>
<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>
</li>
<li><a>Menu 1.7</a>
    <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>
</li>
<li><a>Menu 1.8</a>
<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>
</li>

<li><a>Menu 1.9</a>
<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>
</li>
</ul>
  </div>
</div>
<script src='http://navbar-gemasantri.googlecode.com/files/navbargemasantri.js' type='text/javascript'/>
<div style='clear: both;'/>
silahkan kalian isi menu menu yang akan kalian tampilkan. di tulisan menu-menu yang sudah aku beri kodenya. Javascript yang berada di bawah ini jangan kalian hapus karena kode javascript ini berguna untuk mengatur kecepatan dropdown dari navbar ini sendiri, kalau kalian tidak percaya silahkan kalian hapus.
6. kalau sudah kalian taruh kodenya sekarang mulai save atau simpan. dan lihat hasilnya.
kalau sudah berhasil jangan lupa untuk ucapkan alhamdulillah. sekarang kalian sudah punya menu dropdown dan cara membackup tamplate, silahkan buka juga Bagaimana Seharusnya menjadi Blogger ?. mungkin hanya itu yang bisa ku bagi untuk Cara Membuat Navbar Dropdown di bawah Header. aku akan kasih tips lagi di postingan berikutnya tentang cara membuat navbar yang lebih baru atau navbar animasi. happy blogging sukses selalu.

0 komentar:

Posting Komentar