Selamat Datang

CARA BUAT SUB MENU AUTO HIDE DI BLOG

Salam Blogger utk semua pembaca blog ini...
Pada kesempatan kali ini saya akan coba membantu salah satu pembaca blog saya ini yg bernama
rifqi de rama utk membuat sub menu Auto Hide pada menu utama blog...Mungkin  pertanyaan tersebut
seperti gambar di bawah ini :

Utk Sub menu Auto Hide seperti blog saya ini kebetulan sudah tersedia sebelumnya, jadi saya tinggal merubah menu2nya dan submenunya, Akan tetapi ada juga Template blog yg belum dilengkapi dgn submenu seperti pada blog saya yg lainnya ( seperti gambar dibaawah ) :


Ok utk membuat Sub menu di blog, kita akan sedikit meng otak-atik kode script yg ada di Template,oleh karna itu di sarankan utk mem Back_Up Template terlebih dahulu agar klu kita gagal bisa mengembalikan nya lg seperti semula

Cara Mem Back_Up Template sbb :
~ Login ke Blog terlebih dahulu tentuya
~ Klik Desain
~ Klik Template
~ Klik Cadangka/Pulihkan
~ Klik Unduh Template Lengkap
~ Save File >> OK

Cara MemBuat Sub Menu Auto Hide Di Blog 
Agar lebih jelas kita ulang dari pertama caranya sbb :
·   Login ke Blog
·   Klik Desain
·   Klik Template >> Edit HTML
·   Centang kotak Expand Tempalte Widget >> Tekan CTRL F pada Keyboard >>
    maka akan tampil   kotak Find di sebelah kiri bawah..
·   Copas salah satu kode (cari yg cocok dgn template anda ) dibawah ini kedalam kotak Fine:
                         <div id='header-wrapper'>   
                      <div id='main'>
                      <div id='main-wrapper'>
                      <div class='main-outer'>
·   agar lebih jelas lihat gambar dibawah ini :


·   Setelah itu Copy Code dibawah ini :


<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav{background#0000FF;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>

·   Dan pastekan code tsb tepat DIBAWAH  code yang kita cari tadi ( lihat gambar dibawah ):


·   Klik Simpan Template .
·   Kembali ke Dasbor blog
·   Klik Laman >> Klik jangan tampilkan
·   Klik simpan setelan ( agar lebih jelas lihat gambar dibawah ini ) :

·   Dan lihat Hasilnya.......


Nb :
·   Ganti Background sesuai keinginan
·   Ganti Font sesuai keinginan 
·   <li><a href='#'>Beranda</a></li>  = Ganti # dgn alamat URL blog anda agar apabila 
    di klik tulisan  beranda akan kembali ke halaman beranda blog anda
    Contoh :  <li><a href='http://rizal1976.blogspot.com/'>Beranda</a></li>
·   Jika anda ingin memperbanyak sub menunya anda tingal mencopas kode submenunya.

SELAMAT MENCOBA ,SEMOGA BERHASIL, THANKS......
 

15 komentar:

  1. beribu terimakasih saya ucapkan kepada pembina saya yaitu Rizal Yuliandi
    Semoga atas Ilmu tersebut dapat menjadi tuntunan bagi para pemula di blog...
    sekali lagi saya ucapkan terimakasih

    BalasHapus
  2. ya betul sekali .. tapi saya kurang paham semua dngan blog ..
    gimana ya supaya blog bagus n menari semua orang

    BalasHapus
  3. mas kenapa kalau saya klik "menu 2" larinya malah ke beranda alias menu 2 dan menu lainnya dengan beranda itu isinya sama. padahal sebelumnya saya ada post lain selain beranda
    gimana ya penyelesaiannya ?

    BalasHapus
  4. info yang bagus sob..trimakasih...

    BalasHapus
  5. ilmu yg nermanfaat kawan
    terima kasih sudah berbagi

    BalasHapus
  6. wah lumayan dapat menambah pengetahuan baru ini sobat,
    terima kasih yah sudah berbagi

    BalasHapus
  7. Waah, alhamdulillah bisa euy.. tapi saya mau tanya mas rizal, kalau rentetan menunya jadi nggeser dan ga masuk/ keluar dari track kolom posting itu gimana caranya ya gesernya? terus ubah2 font, warna, dllnya disebelah mana? terima kasih..

    BalasHapus
  8. @anonim ...utk mengganti Font Menu silakan ubah kode font ( Georgia, "Times New Roman", Times, serif )
    utk mengganti Font Sub Menu silakan ganti ( Verdana, Geneva, sans-serif )
    silakan merujuk ke jenis font yg ada di ms.office,thanks....

    BalasHapus
  9. thanks info'x gan, bermanfaat sekali bagi saya ..

    BalasHapus
  10. bagus banget triknya gan..
    udah lama ane ngincar tutorial yg satu ini makasih gan..
    ane coba ya.

    BalasHapus
  11. @Aulia ...semoga berhasil mas...

    BalasHapus
  12. cara bikin sub menu kaya situ giman gan,..keren tuh

    BalasHapus
    Balasan
    1. silakan ikuti aja tutorial diatas sob, gampang koq...thanks atas koment nya

      Hapus