Tutorial cara membuat menu bar drop down di blogspot

Untuk melihat domo, silahkan klik gambar

Pada posting saya di sebelumnya saya sudah mengulas tentang cara membuat / memasang menu drop down pada side bar / sisi samping blog . Nah untuk kali ini saya juga akan mencoba mengulas mengenai cara membuat navigasi menu bar drop down yang dipasang pada menu utama blog, yaitu letaknya biasanya ditempatkan di atas header atau dibawah header.

Ketika konten atau isi website / blog semakin lama semakin banyak, tentunya hal tersebut juga akan banyak makan space di halaman website/ blog. Untuk itulah menu drop down ini dibuat agar page website / blog tetap terlihat rapi, simple, dan tidak acak-acakan.

Menu drop down in juga berfungsi sebagai pengelompokan kategori konten. Misalnya untuk situs penjualan barang dengan bermacam-macam produk. Maka bermacam-macam produk tersebut dapat dikelompokkan menjadi satu navigasi dengan menu utamanya adalah produk. Mungkin untuk menambah sedikit lebih jelas gambaran tentang aplikasi membuat navigasi menu bar drop down ini anda bisa melihat demonya dengan meng-klik gambar diatas.

Sekarang akan saya share script atau kode HTML nya.

Untuk script yang pertama berikut ini berfungsi sebagai pemberi perintah untuk pengaturan ukuran bidang menu, ukuran text, warna background, warna border, warna text, pengaturan jarak, dan sebagainya.
Untuk itu script tersebut ditempatkan pada HTML TEMPLATE. Tepatnya sebelum / diatas kode :
 ]]></b:skin>  ( tekan CTRL + F untuk mempermudah melakukan pencarian).

Buka "TEMPLATE" pada blogger &gt;&gt;klik "EDIT HTML" >> beri tanda centang pada "Expand Template Widget" .

Agar lebih aman jika ternyata mengalami kegagalan sebaiknya "COPY" dulu "HTML TEMPLATE" anda dan "PASTE" ke notepad sebelum mengedit.

/* --- Start menu bar drop down ---*/
#mbtnavbar {
background: #F28110;                                     /* -- warna background menu utama --*/
width: 580px;                                                   /* -- Lebar keseluruhan menu utama --*/
color: #F28110;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #F28110;                      /*-- warna border atas menu utama --*/
height:35px;                                                       /*-- Tinggi menu utama --*/
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #F28110;                                   /*-- warna border kiri --*/
border-right:1px solid #F28110;                                 /*-- warna border kanan --*/
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFFFFF;                                                                 /*-- Warna text link tujuan --*/
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #CE5E03;                                  /*-- warna background yang aktif ( kena mouse ) --*/
color: #FFFFF;                                                 /*-- warna teks yang aktif ( kena mouse )--*/
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 160px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #F28110;                                       /*-- warna background sub menu drop down --*/
width: 130px;                                                    /*-- lebar sub menu drop down --*/
color: #FFFFFF;                                           /*-- warna text sub menu drop down --*/
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #FFFFFF;              /*-- warna border bawah sub menu drop down --*/
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #CE5E03;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Keterangan Script ke-1:

Pada script pertama di atas, sebagian telah saya beri tanda pewarna background pada text.

Nilai tersebut dapat di atur sesuai dengan keinginan masing-masing.

( Tips untuk membantu dan mempermudah pemilihan warna sebaiknya gunakan software graphic design seperti adobe photoshop dan sebagainya untuk merubah nilai dari warna-warna tersebut, karena nilai-nilai tersebut sama dengan yang ada pada software-software design grafis.)

<div id="mbtnavbar">
<ul id="mbtnav">
  <li>
  <a href="http://kontraktorsolarcell.blogspot.com"><b>HOME<b></b></b></a>
  </li>
  <li>
  <a href="http://kontraktorsolarcell.blogspot.com/p/product.html"><b>PRODUCT</b></a>
  <ul>
    <li><a href="http://kontraktorsolarcell.blogspot.com/p/product/module-solar-cell.html">Module Solar Cell</a></li>
    <li><a href="#">Solar Street Light (PJU)</a></li>
    <li><a href="#">Solar Water Pumps</a></li>
    <li><a href="#">Inverter</a></li>
    <li><a href="#">Kontroller</a></li>
    <li><a href="#">Digital Battery Charge</a></li>
  </ul>
  </li>
  <li><a href="http://kontraktorsolarcell.blogspot.com/p/about.html"><b>ABOUT PRODUCT</b></a>
  <ul>
  <li><a href="#">Module Solar Cell</a></li>
  <li><a href="#">Solar Street Light (PJU)</a></li>
  <li><a href="#">Solar Water Pumps</a></li>
  <li><a href="#">Inverter</a></li>
  <li><a href="#">Controller</a></li>
  <li><a href="#">Digital Battery Charge</a></li>
   </ul>
</li>
<li>
<a href="http://kontraktorsolarcell.blogspot.com/p/services.html"><b>SERVICES</b></a>
</li>
<li>
<a href="http://kontraktorsolarcell.blogspot.com/p/about-us.html"><b>ABOUT US</b></a>
   <ul>
   <li><a href="#">Profile</a></li>
   <li><a href="#">Company Legality</a></li>
   <li><a href="#">Experience Us</a></li>
   </ul>
</li>
<li>
<a href="http://kontraktorsolarcell.blogspot.com/p/contact-us.html"><b>CONTACT US</b></a>
   </li>
</ul>
        </div>

       
Sedangkan untuk script yang ke-dua, diletakkan pada widget / gatget yang posisinya di atas header atau di bawah header.

Buka "TATA LETAK" pada blog >> klik "TAMBAH GADGET" >>; Masukkan script ke-dua tersebut pada bidang HTML gadget blog. >> "SAVE"

Keterangan script ke-2 :
Pada scrpt ke-2 diatas jug telah saya beri tanda pewarna pada text.
Anda dapat mengganti Text menu tersebut sesuai dengan kebutuhan website / blog anda.
Untuk Url link juga silahkan diedit untuk disesuaikan dengan Url link halaman website / blog masing-masing.
Jika ingin menambahkan sub menu lagi pada sub menu pertama maka anda tinggal menambahkan kode

<ul> <li><a href="URL-LINK-SUB-MENU-2">NAMA SUB MENU 2</a></li> </ul>

tepat dibawah sub menu 1.

Contoh :
Pada script diatas, misalkan saya ingin menambahkan sub menu-2 pada menu:  PRODUK >> MODULE SOLAR CELL >> SOLAR STREET LIGHT (PJU) >> LED (ket : Sub menu 2.1)
                                                                                     >> MERCURE  (ket : Sub menu 2.2)

Maka penulisan scriptnya pada menu produk menjadi seperti berikut ini :

<li>
  <a href="http://kontraktorsolarcell.blogspot.com/p/product.html"><b>PRODUCT</b></a>
  <ul>
    <li><a href="http://kontraktorsolarcell.blogspot.com/p/product/module-solar-cell.html">Module Solar Cell</a></li>
    <li><a href="#">Solar Street Light (PJU)</a>
<ul>
  <li><a href="#">Mercure</a></li>
  <li><a href="#">LED</a></li>
</ul>
    </li>
    <li><a href="#">Solar Water Pumps</a></li>
    <li><a href="#">Inverter</a></li>
    <li><a href="#">Kontroller</a></li>
    <li><a href="#">Digital Battery Charge</a></li>
  </ul>
  </li>

Untuk masing-masing link dapat dibuatkan 1 halaman 1 link (1 menu / 1 sub menu )

Caranya :
Buka DASHBOARD BLOG >> klik "LAMAN" >> "BUAT LAMAN BARU" >> Beri nama title / judul sesuai dengan NAMA MENU / SUB MENU >> Tulis isi konten halaman >> "SIMPAN"
Kemudian lihat hasil halaman yang sudah disimpan tersebut >> "COPY" URL link halaman tersebut lalu "PASTE" ke script ke-2 Menu drop down diatas.

CUKUP SEKIAN, SEMOGA INI BISA MEMBANTU . . . 

Jika ingin bertukar link dengan DEJAVANTA BLOG silahkan klik BACKLINKS GENERATOR >>
Website atau Blog anda juga akan tampil di DEJAVANTA BLOG seperti daftar nama-nama website dan Blog di HALAMAN INI >>
Lumayan kan bisa nambah rating blog anda !!!