CARA MEMBUAT MENU UNTUK BLOG
Oke teman, Karena ada teman saya yang bertanya kepada saya bagaimana cara membuat menu untuk blog, maka kali ini saya akan membagikannya untuk kalian.
Tampilan Menunya yang sudah jadi dapat dilihat di
running-text-s.blogspot.com
Tanpa basa-basi lagi, berikut caranya :
1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>
<style>
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
width:12400px;
float: left;
}
#coolMenu > li {
float:left;
}
#coolMenu li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 30px;
float:left;
padding: 5px 10px 5px 10px;
}
#coolMenu li:hover ul {
}
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
margin:0 auto;padding:0 auto;
background: transparent;
padding-left:3px;
border-bottom:0px solid
#ccc;border-top:0px solid #ccc;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
padding:8px 10px 8px 10px;
}
#coolMenu > li:hover >
a {
background: transparent;
color: #f00;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #0466f0;
padding:3px 5px 3px 5px;
}
#coolMenu ul li a {
color: #fff;
width: auto;
}
#coolMenu ul li:hover a {
background: #0000ff;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
</style>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
<script>
$(function(){
$('#coolMenu').find('>
li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true,
true).slideToggle('fast');
});
});
</script>
Kode yang berwarna Hijau adalah kode
lebar menu nya, jadi sesuaikan dengan blog kamu.
Kode yang berwarna merah adalah warna background menu nya.
Kode yang berwarna ungu adalah warna background sub menu nya.
4. Simpan Template
5. Ini adalah kode HTML Menu Drop Down Animasi.
<ul id="coolMenu">
<li><a
href="http://running-text-s.blogspot.com">Home</a></li>
<li><a
href="http://running-text-s.blogspot.com/2012/10/running-text-menjual-running-text.html">Tips</a></li>
<li>
<a
href="http://running-text-s.blogspot.com/2012/10/about-me.html">Hubungi
Kami</a>
</li>
<li><a
href="http://sentosa.co.id/index.php/galeri">Galeri
Pengalaman</a></li>
<li><a href="#"><blink>Produk Lain</blink></a>
<ul class="noJS">
<li><a
href="http://sentosa.co.id/index.php/led/led-billboard2"
target="_blank">Videotron</a></li>
<li><a
href="http://sentosa-alami-harapan.blogspot.com/search/label/Jam%20Penanda%20Waktu%20Sholat"
target="_blank">Jam Mesjid</a></li>
<li><a
href="http://sentosa-alami-harapan.blogspot.com/search/label/Kamera%20CCTV"
target="_blank">Kamera CCTV</a></li>
</ul></li>
<li>
<a href="#">Extra</a>
<ul class="noJS">
<li><a
href="http://amirmirza15.blogspot.com/2012/11/free-download-sofware-keren-kali-ini.html">Software</a></li>
<li><a
href="http://amirmirza15.blogspot.com/search/label/Game">Game</a></li>
<li><a
href="http://amirmirza15.blogspot.com/search/label/Humor">Humor</a></li>
</ul>
</li>
</ul>
Ganti URL amirmirza15.blogspot.com atau URL yang tercakup di x <a href="x" dengan URL yang
dituju.
6. Sekarang untuk memasang menu nya, kamu bisa gunakan salah satu cara di bawah
ini.
(Copy kode nomor 5 ke 2 cara di bawah ini, pilih salah satu saja, dan ikuti
instruksinya.)
Cara 1 : Add Gadget > HTML/Java Script > Copy kode nomor 5.
Cara 2 : Template > Edit HTML, Kamu cari kode bagian header blog
kamu, untuk lebih mudah cari kode ini <div id='header-wrapper'>
biasanya, kodenya kaya di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)'
type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
NANTI KODE NOMOR 5 NYA LETAKAN DISINI DI BAWAH KODE
AKHIR HEADER
Copy
kode nomor 5 ke 2 cara di atas, ke HTML/JavaScript atau cara ke-2 letakan ganti
kata-kata berwarna merah dengan kode nomor 5.
Notice:
Jika cara 1 gagal, berarti kamu harus gunakan cara ke 2 pasti berhasil.
Jika menggunakan cara ke-2 sebaiknya klik dulu PERTINJAUAN untuk
menentukan berhasil tidaknya. Setelah berhasil bari SIMPAN TEMPLATE.
Semoga berhasil kawan !
