Cara membuat top navigasi yang seperti itu di butuhkan struktur kode sebagai berikut
Struktur HTMLnya seperti berikut
/*--HTML--*/
<ul id="topnav">Ini adalah menu yang nantinya akan tampil di blog kamu, jadi bisa kamu ganti isinya sesuai blog kamu
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Selanjutnya adalah struktur CSS, CSS ini gunanya untuk mengatur background gambar, background hover dan warna huruf dari menu kita nanti.
/*--CSS--*/
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: white;
background: url(*) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: white;
background-position: left bottom;
background: url(http://i1191.photobucket.com/albums/z464/izoel1/topnav.png) repeat-x;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}
Pada struktur CSS di atas warna background saya samakan dengan blog contoh, kamu bisa mengganti warna backgrounnya dan warna hurufnya.
Animation JQuery, ini di butuhkan untuk mengatur efek animasi menu kamu nantinya
/*--jquery--*/
<script src='http://izoel.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>.
Dan yang terakhir adalah pengaturan script di template kamu :
/*--javascript--*/
$(document).ready(function() {.
$("#topnav li").prepend("<span/>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
Sekarang saya akan menjelaskan pemasangan pada blogger, caranya kamu masuk ke blogger >>Design >> Edit HTML >> beri tanda centang di opsi expand widget template.
Sekarang cari kode <head> letakan kode /*--jquery--*/ setelah atau di bawahnya kode <head>.
Selanjutnya kamu cari kode ]]></b:skin> dan kamu letakkan struktur css *--CSS--*/ tepat di atas atau sebelum kode ]]></b:skin>.
Selanjutnya kamu cari kode </body> lalu kamu letakan kode javascript /*--javascript--*/ di atas atau sebelum kode </body>. "dimasukkan" di dalam <script></script>
Simpan template kamu.
Langkah terakhir kamu keluar dari edit HTML dan masuk ke page elements, pilih add a gadget, kemudian kamu pilih menu HTML/JavaScript dan kamu masukkan struktur kode /*--HTML--*/di dalam kotak, kemudian simpan.
Sekarang lihat blog kamu.
Selamat mencoba, semoga berhasil.
0 komentar:
Posting Komentar