CARA BUAT SUB MENU AUTO HIDE DI BLOG

Newest Post

CARA BUAT SUB MENU AUTO HIDE DI BLOG

// Posted by :Unknown // On :Rabu, 02 Januari 2013

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>

<li><a href='#'>Beranda</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</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......