Membuat Show/Hide Menu Navigasi Horizontal

Membuat Show/Hide Menu Navigasi Horizontal sama halnya dengan membut men navigasi horizontal pada blog. Akan tetapi dalam tips ini ada sedikit perbedaan dari tips-tips navigasi horizontal lainnya. Mungkin untuk lebih jelasnya dapat sobat blogger lihat pratinjaunnya di blog kami.

DEMO

Setelah melihat pratinjau tersebut, mungkin sudah lebih jelas lagi sobat blogger mengetahui tujuan dari tips kali ini. Oke langsung saja kita belajar untuk menampilkannya pada blogger, terutama pada blog sobat.

Langkah pertama yang anda butuhkan pastinya anda sudah dalam posisi log-in pada blog sobat. Dan langkah selanjutnya silahkan ikuti langkah-langkah berikut ini:

1. Pada dasbor blog sobat, silahkan pilih Template.
2 Kemudian pilih Edit HTML ==> Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari kode </head> dan letakkn kode berikut diAtasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.memanjang&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;100%&quot;}, 400);
$(this).hide();$(&#39;.menyusut&#39;).show();
});

$(&#39;.menyusut&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;200px&quot;}, 400);
$(this).hide();$(&#39;.memanjang&#39;).show();
});
});
</script>

Note: jika kode yang berwna kuning sudah ada dalam blog anda, tidak usah  anda paste kode yang berwarna kuning.

5. Cari kode ]]></b:skin> dan letakkan kode berikut diAtasnya.

#menuguegitu {
width:200px;
height:50px;
background:#999999;
}

.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

6. Kenudin Simpan Template.
7. Setelah itu silahkan anda beralih pada Tata Letak.
8. Pilih Tambah Gadget/Add Gadget.
9.Pilih HTML/JavaScript dan letakkan kode berikut ini:

<div id="menuguegitu">
<div class="membuatbordermelengkungroundedcorner">
<center>
<a href="http://tips-untuk-blogger.blogspot.com/" style="color: #cc0000; font-weight: bold;">Home</a><span style="color: #cc0000; font-weight: bold;"> | </span><a href="http://tips-untuk-blogger.blogspot.com/search" style="color: #cc0000; font-weight: bold;">Index</a><span style="color: #cc0000; font-weight: bold;"> | </span><a href="http://tips-untuk-blogger.blogspot.com/feeds/posts/default" style="color: #cc0000; font-weight: bold;">New!</a> | <a href="http://tips-untuk-blogger.blogspot.com/#" style="color: #cc0000; font-weight: bold;">Facebook</a><span style="color: #cc0000; font-weight: bold;"> | </span><a href="http://www.twitter.com/ikan_mania25" style="color: #cc0000; font-weight: bold;">Twitter</a><span style="color: #cc0000; font-weight: bold;"> | </span><a href="http://tips-untuk-blogger.blogspot.com/#" style="color: #cc0000; font-weight: bold;">Google+</a></center>
</div>
</div>
<br />
<br />
<div id="button-wrapper">
<button class="memanjang">Tampilkan Menu Horizontal</button>
<button class="menyusut" style="display: none;">Kembalikan</button>
</div>

Note: Untuk tulisan yang berwarna hijau, silahkan anda ganti dengan alamat URL yang akan dituju. Sedangkan tulisan tebalnya silahkan anda ganti dengan Label/Atribut  menu navigasi horizontal blog anda.

10. Setelah selesai, silahkan Save. Dan lihat perubahan yang terjadi
Selamat mencoba, semoga berhasil dan bermanfaat. Mohon maaf jika ada kesalahan. (Jkt/2012)