mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

Bikin menubar pulldown versi 2

Baru saja blogger.com mengeluarkan fasilitas baru untuk para blogspot mania yaitu fasilitas page (yang sebenarnya bisa dibilang "too late" :x ), Artikel ini tidak membahas mengenai fasilitas tersebut melainkan bagaimana membuat Menubar pulldown yang sedikit lebih variatif dimana Artikel ini juga merupakan Pe eR tersulit dan terpanjang yang bisa saya selesaikan yang diberikan Rian pada komentar artikel Bikin menubar pulldown versi pertama, baca disini. Secara umum menubar pulldown versi 2 ini hampir sama dengan menubar cara yang pertama, perbedaannya hanya terletak pada bagian sub-menunya (menu baru yang muncul setelah kursor berada diatas Menu Utama) masih memiliki sub menu lagi sampai 2 turunan :x :x :x , Ilustrasi singkatnya seperti pada gambar screen capture diatas.
Jika tertarik silahkan mencobanya sendiri langkah-langkahnya adalah sebagai berikut: :k :k ;)
Persiapan:
  1. Persiapkan semua link/URL LABEL blog yang akan pasang sebagai URL Menu Utama, Sub Menu Utama, dan Sub dari Sub Menu Utama. URL yang diambil adalah link dari LABEL yang dimasukkan ketika membuat artikel, jika belum jelas seputar LABEL mohon baca "FAQ cara membuat menu bar di blogspot" agar nantinya tidak kesulitan saat proses pengeditan/pemasangan Link.
  2. Sebaiknya URL yang disiapkan sudah dipilah mulai dari kategori LABEL umum hingga yang lebih detail.
  3. Masuk ke Kontrol Panel blog, pilih TATA LETAK ->  EDIT HTML.
  4. Sekedar mengingatkan untuk tidak lupa backup template sebelum melakukan perubahan dengan cara mendownloadnya terlebih dahulu. berhubung segala resiko kerusakan template diluar tanggung jawab saya ya :D :D :D
Pemasangan Kode CSS
Setelah proses backup template selesai copy seluruh kode CSS dibawah ini dan tempatkan  diatas kode: ]]></b:skin>



/* pull-down mainmenu css*/

behavior:url("csshover2.htc");    /* important ! */

.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFFFF;
    background: #000000;
    padding: 0;
    border: solid #FFFFFF;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;font-style:normal;text-decoration:underline;
    color: #FFFFFF;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}
.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}   
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;   
   
    background: #333333;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}
.mainmenu li li {
    width:15em ;
}
.mainmenu li li a{
    width:13em ;
}
.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch  
{
    left: auto;
}
.mainmenu li:hover{
    background: #666666;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
    background: #000000;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #FFFFFF;
}
/* end of mainmenu css */

Khusus untuk pemasangan kode dibawah ada dua cara:

Cara Pertama
Masih dihalaman Edit HTML beri tanda centang pada pada Expand Widget kemudian cari kode <div id='content-wrapper'> (tekan Ctrl + F)
Letakkan kode HTML dibawah ini tepat dibawah kode diatas.


<!-- PULL DOWN MENU Mulai -->
<div class="menuutama">
<ul>
<li class="li_nc"><a href="/" target="_self" >Home</a></li>
<!-- baris ini jangan diubah -->
<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a><ul class="ul_ch">
  <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1" target="_self" >SubMenu1-1</a><ul class="ul_ch">
     <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/"  >Sub Menu1-1A</a><ul class="ul_ch">
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-1"  >SubMenu1-1A-1</a></li>
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-2"  >SubMenu1-1A-2</a></li>
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-3"  >SubMenu1-1A-3</a></li>
        </ul></li>
     <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2B"  >SubMenu1-2B</a></li>
     </ul></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2" target="_self" >SubMenu1-2</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-3" target="_self" >SubMenu1-3</a></li>
  </ul></li>
<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a><ul class="ul_ch">
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-1" target="_self" >SubMenu2-1</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-2</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-3</a></li>
   </ul></li>
<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3"  >Menu3</a></li>
<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4"  >Menu4</a></li>
</ul>
</div>
<!-- PULL DOWN MENU 2.0 by Oentoe_09 | Blog: http://oentoe09.blogspot.com/ | Selesai -->


Keterangan Kode HTML diatas:
  • kode Warna Hijau adalah kode yang tampil sebagai menu utama diantaranya link HOME, Menu 1 sampai menu 4.
  • Kode Warna Biru adalah kode untuk Sub-Menu pulldown pertama
  • Kode Warna Ungu adalah kode Sub-Menu pulldown ke-2 yaitu sub dari Sub-Menu  pertama .
  • Kode Warna Merah adalah kode untuk Sub-menu  ke-3 yaitu sub dari Sub-menu pulldown ke-2.
  • Ganti semua kode http://NamaBlogAnda.blogspot.com/search/label/xxxx-xxx  dengan URL Label Artikel yang sebelumnya sudah dipersiapkan (kecuali untuk HOME tidak perlu diedit), sebagai contoh jika salah satu artikel diberi LABEL "Tutorial" (tanpa tanda kutip) maka URLnya  menjadi http://NamaBlogAnda.blogspot.com/search/label/Tutorial. sehingga menjadi seperti ini: <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Tutorial"  >Tutorial</a></li>
Untuk melihat hasilnya masih di halaman Edit HTML tekan tombol Pratinjau, jika sudah nampak Menu Bar-nya silahkan Save hasil Perubahan Anda.

Cara Kedua
Cara ini hanya jika hasil pada cara pertama tidak sesuai dengan keinginan (biasanya letak menu bar tidak rapi), dan pastikan cara pertama diatas belum dilakukan.
Cara kedua ini adalah dengan menempatkan kode HTML diatas melalui Add Widget di tab Add Elemen Page yang nantinya widget tersebut diletakkan dibawah header. Berhubung secara default widget header hanya bisa satu widget yaitu Header itu sendiri maka masih di tab EDIT HTML beri tanda centang pada Expand Widget dan cari kode ini <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> setelah ketemu ganti nilai maxwidgets menjadi 2 dan nilai showaddelement menjadi yes, setelah itu baru simpan hasil perubahannya.
Pindah ke tab Add Elemen Page kemudian klik Add Widget yang berada dibawah Header. Pilih HTML/Javacript  dan paste semua kode HTML diatas, lalu simpan.
Tekan tombol Pratinjau untuk melihat Hasilnya.

Tips Menambah atau mengurangi Link Menu:
  • Jika ingin menambah lagi Menu Utama (HOME, Menu 1 dstnya), fokus hanya pada kode berwarna hijau kemudian copy paste kode  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Label" >Label</a></li>  ini dan tempatkan tepat dibawah kode   <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (tergantung berapa banyak Menu utama yang ingin ditambahkan). Sedangkan jika ingin mengurangi  Menu Utama langsung hapus baris yang berwarna hijau yaitu kode dari <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (atau tergantung berapa Menu utama yang ingin dihapus).
  • Jika ingin membuat Sub menu pada Menu3, copy paste semua kode berwarna biru pada menu2 dan paste diantara  kode <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3"  >Menu3</a> dan  </li>. Hal yang sama berlaku jika ingin menambahkan Sub Menu pada Menu 4 atau pada tambahan Menu Utama yang anda telah tambahkan.
  • Jika masih ingin menambahkan sub menu dari sub menu  pada Menu3 dan Menu4 (seperti pada Menu 1) :x :x :x , copy semua kode menu1 yaitu mulai dari  kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a>  sampai pada kode </li>  yaitu sebelum  kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a> kemudian replace kode Menu 3 dengan hasil copy tadi. Hal yang sama berlaku jika ingin menambahkannya pada Menu 4 atau pada tambahan Menu Utama yang telah tambahkan.
Semoga bisa bermanfaat, selamat mencoba dan semoga sukses ataupun tidak sukses bikin menu bar-nya. Btw don't forget to leave comment ya :k :k :k .

Update:
Mau desain sendiri menu bar di blog anda menggunakan software gratis? silahkan baca info singkatnya disini atau mau langsung  klik Download untuk mengunduh aplikasinya

20 komentar:

Anthony Harman mengatakan...

Sesuatu yang baru layak untuk dicoba. Makasih bro

Oentoe_09 mengatakan...

semoga sukses bro ;) ;) ;) and thanks dah mampir lagi

Bodrex Caem mengatakan...

maaf mo minta d bantuin ni master....
klu bikin menu n translator kayak punya anda d paling atas tu gmna????

Alfan Alfyan Alrifa'i Albantani mengatakan...

bantuin daku, aku baru BELITA dalam dunia blog. lihat za hasilnya http://ddxrp.blogspot.com
Toolooooooong

Oentoe_09 mengatakan...

@Bodrex Caem:
untuk bikin widget tab kayak sidebar diatas silahkan baca disini
@ Alfian .A.A.A:
saya gak nemu menu yang aneh di blognya mas :)

Alfan Alfyan Alrifa'i Albantani mengatakan...

nyambung lagi yang Mas Oentoe,, maaf sebelumnya. memang blog saya wajar-wajar saja. tapi tiap kali mau bikin submenu bar susah banget. padahal dah sesuai dengan petunjuk dari blog mas. Apa template bisa mempengaruhi gitu?

Oentoe_09 mengatakan...

@ Alfan AAA:
sayang menu bar gak saya temukan di blognya, jadi gak tahu kesalahannya letaknya dimana, tapi dari pengalaman kebanyakan kesalahan berasal dari tidak dibuatnya Label/kategori/tag pada artikel sehingga link menu/tombol tidak berfungsi. Lebih jelas silahkan baca disini
Mengenai kemungkinan penggunaan kostum template saya kira cara diatas bisa pada semua template blogger.
Semoga bisa membantu

moh thobroni mengatakan...

thanx bro, bagus hasilnya. tp tampilan postingq read more nya jd g aktif. mohon bantuannya

Link Store mengatakan...

mas....
kok kagak bisa2 ya....?

Oentoe_09 mengatakan...

@ Link Store: kayaknya artikel diatas kurang disimak deh. terutama bagian peletakan css setelah ]]></b:skin> coz sampe keliahatan gitu ya ?

blogGing mengatakan...

mas punyaku kok kayak gini ya? apa ada yang salah? mohon bantuannya.

IT UNTUK KEHIDUPAN mengatakan...

Mksie infony. .

Oentoe_09 mengatakan...

@ blogGing: item menu yang tampil tidak sesuai lebar template.

@ IT UNTUK KEHIDUPAN: sama-sama sob

Riiky_Devil's mengatakan...

maz, pxq kok g bisa y??
pdahal kan q pengenx klo kursor diarahkan ke menux baru muncul sub menux...
kok punyaq muncul semua sub menux..?? mohon bantuanx maz..
thanks..

Oentoe_09 mengatakan...

@ Riiky_Devil's : silahkan perhatikan keterangan kode diatas untuk kode yang berwarna ungu dan merah pada CARA PEMASANGAN untuk html code-nya... semoga berhasil

Ramadhan mengatakan...

punya saya gak bisa bang .. malah kayak gini notgodnotdevil.blogspot.com..mohon pencerahannya

Oentoe_09 mengatakan...

@ Ramadhan:
hasilnya gak seperti komen diatas Mas, malah lebih keren menu pulldown.

Hendra mengatakan...

Bro, terima kasih atas tipsnya..berguna banget n tips yang bagus bgt....coz bru dua hari belajar ngeblog...jadi masih kaya bayi lahir dua hari hehehe... and ini hasilnya tpi bru menu utamanya aja sub menunya belum http://nembiz.blogspot.com

Sukses selalu

Real Jack mengatakan...

pusing... O.o?

prince blue mengatakan...

punya saya kok muncul smua c mas??
padahal dah sesuai cntoh,mohon bantuanya ya...
prince blue / iyoncreated.blogspot.com

Posting Komentar

Label

Blog support

Entri Populer