-->

Navigasi di bawah header

Sobat mau memperindah tampilan blog dengan membuat navigasi di bawah header seperti contoh di bawah ini lihat demonya disini




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

oppie
Menulis dan berbagi hal yang perlu dibagi dan perlu di tulis.

Related Posts

6 comments

Post a Comment

Subscribe Our Newsletter