Sebelumnya sobat cari kode <head> tag HTML, tambahkan kode berikut
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]�>
Bagian pertama adalah Javascript, bagian kedua adalah CSS stylesheet, dan terakhir adalah bagian PNG hack for IE 6.
Jangan lupa untuk menambahkan kode berikut ke mana saja dalam <body> tag:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
Untuk menambahkan item menu ke atas (catatan: tag div setelah tag img):
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
Untuk menambahkan item menu ke bawah (catatan: p tag adalah sebelum img tag):
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
Selesai dan jangan lupa seperti biasa sebelum mengutak atik template sobat , simpan dulu template sobat di notepad atau pada tab html yang ada tulisan Download template lengkap
atau kalau belum jelas penjelasan di atas silahkan sobat kunjungi langsung situsnya di sini
mantaf mang...!!!
ReplyDeletemantebh mang ieu,,,,
ReplyDeletesip dach
kanggo naon ieu teh mang :j:
ReplyDeletemantapsss euy....navigasi. biar mudah di obok-obok blognya
ReplyDeletemantab mantab mantab,,
ReplyDeletebaik nieh
izin tuk di serap ilmunya.
Navigasi di bawah header
mantaf... langsung praktek dech..
ReplyDelete