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




Artikel Terkait:

18 komentar:

Unknown mengatakan...

sangat bermafaat,,, terimakasih

Unknown mengatakan...

slmat siang gan
bagai mana cara memasukan gambar dan ketrangan d home,product, contact us. saya masih pemula.
untuk tampilan home, product saya sudh buat
terimakasih

Sutamayapnna mengatakan...

Thanks gan,,, It's works

Unknown mengatakan...

Mantap dan sangat berguna untuk bloger pemula seperti saya.
Izin coba

Unknown mengatakan...

terima kasih pembelajarannya, excellent !

Anonim mengatakan...

puny ku kq gk bisa y, mlah jejer menubar nya smua

kumpulan tips mengatakan...

sangat membantu bisa dicoba terima kasih sudah saya pasang di blog

Unknown mengatakan...

mantab gan,,tutorialnya ,,
saya mau tanya nie gan,,saya kan sudah bikin menu horisontal di laman nah saya ingin menu tersebut tgl di tambah contoh menu notbook dropdowny acer,thosiba,asus,dll itu g mana gan,,mksh
www.pakrusjaya.blogsptot.com

Alam emblem mengatakan...

gan mau tanya, gmna cara menampilkan beberapa posting dengan menekan 1 sub menu, apakah bisa??

Mas Toto mengatakan...

Terima kasih infonya gan....
ijin share boleh ya.....

ALHA mengatakan...

trima kasih ya.....
brmanfaat banget.... hampir 2 jam gue cari solusinya akhirnya ketemu juga hehehehehe :D

Gemar mengatakan...

Gan mau nanya kalau memasukkan Link LABEL di Sub Menu gimana yah ? Soal saya coba gak bisa kare ada ket "max-results=5". Mohon Solusinya gan.

Artikelnya sangat bermanfaat. Sukses selalu

Bonus sign up 5 USD mengatakan...

Nice info,thank telah menambah ilmu saya

Nonton mengatakan...

terima kasih gan sudah share

:-bd

www.pakteguh.com mengatakan...

masih tutorialnya, sangat membatu

Unknown mengatakan...

makasih banyak buat tutornya,, sangat bermanfaat sekakali

http://goo.gl/TyqyTY

Unknown mengatakan...

Thx ,gan ini tutorial yang paling lengkap , saya n yari dari tadi ngk dpet2 kyknya pada copasnya, tapi ini Asli 100% mantap Langusng ngerti saya ...
BTW mampir juga , ke http://crystaline-ti.blogspot.com/ walaupun masih berantakan , baru buat 1 hari :D heheeh

Unknown mengatakan...

okay makasih atas petunjuknya gan.selamat menjalankan ibadah puasa...

adf.ly - shorten links and earn money!
 
Support : DEJAVANTA | KARYA MANDIRI
Copyright © 2010. D E J A V A N T A - All Rights Reserved
Template by Creating website Modify by DEJAVANTA
Proudly powered by Blogger