Jika anda adalah penggemar berat mac anda pasti akan menyukai Dock
menu ini. Dock menu ini di buat dengan menggunakan Jquery dan fisheye
komponen dari interface serta beberapa icon dock.Dock menu Ini(lihat Demo) bisa kita buat dalam dua posisi yang berbeda yaitu diatas (lihat Demo) dan di bawah (lihat Demo).Dan adapun cara pembuatanya adalah sebagai berikut :
1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>
<script src='http://bambanggallery.at.ua/cs-dock-men/script/jquery.js' type='text/javascript'/></script>
<script src='http://bambanggallery.at.ua/cs-dock-men/script/interface.js' type='text/javascript'/></script>
<link href='http://bambanggallery.at.ua/cs-dock-men/script/style.css' rel='stylesheet' type='text/css'/>
6.Copy seluruh kode di bawah ini dan pastekan diantara kode <body> dan kode </body>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
7.Untuk menambahkan menu pada dock menu
a.Dock menu atas tag span berada setelah image tag (lihat kode yang berwarna hijau)
<a class='dock-item' href='http://bambangpage.blogspot.com/'><img alt='home' src='http://bambanggallery.at.ua/cs-dock-men/image/home.png'/><span>bambangpage</span></a>
b.Dock menu bawah tag span berada sebelum image tag (lihat kode yang berwarna hijau)
<a class="dock-item2" href="http://bambangpage.blogspot.com/"><span>Home</span><img src="http://bambanggallery.at.ua/cs-dock-men/image/home.png" alt="home" /></a>
Selamat mencoba dan semoga bermanfaat
No comments:
Post a Comment