CARA BUAT SUB MENU AUTO HIDE DI BLOG
By
Rizal
15
komentar
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 :
· 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 :
· 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......
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 :
· 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......
beribu terimakasih saya ucapkan kepada pembina saya yaitu Rizal Yuliandi
BalasHapusSemoga atas Ilmu tersebut dapat menjadi tuntunan bagi para pemula di blog...
sekali lagi saya ucapkan terimakasih
ya betul sekali .. tapi saya kurang paham semua dngan blog ..
BalasHapusgimana ya supaya blog bagus n menari semua orang
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
BalasHapusgimana ya penyelesaiannya ?
info yang bagus sob..trimakasih...
BalasHapusilmu yg nermanfaat kawan
BalasHapusterima kasih sudah berbagi
wah lumayan dapat menambah pengetahuan baru ini sobat,
BalasHapusterima kasih yah sudah berbagi
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@anonim ...utk mengganti Font Menu silakan ubah kode font ( Georgia, "Times New Roman", Times, serif )
BalasHapusutk mengganti Font Sub Menu silakan ganti ( Verdana, Geneva, sans-serif )
silakan merujuk ke jenis font yg ada di ms.office,thanks....
thanks info'x gan, bermanfaat sekali bagi saya ..
BalasHapusbagus banget triknya gan..
BalasHapusudah lama ane ngincar tutorial yg satu ini makasih gan..
ane coba ya.
@Aulia ...semoga berhasil mas...
BalasHapuscara bikin sub menu kaya situ giman gan,..keren tuh
BalasHapussilakan ikuti aja tutorial diatas sob, gampang koq...thanks atas koment nya
HapusNice gan :)
BalasHapusthanks gann
Hapus