Ok langkah pertama download pakej css dock menu ini. Kemudian extract file itu. Anda cari file di dalam folder tersebut iaitu yang bernama "jquery.js, interface.js, style.css". Setelah itu, anda upload ke hosting anda masing2, klu nak free host dekat geocities.com. Begitu juga dengan image nya, anda perlu upload dekat mana2 hosting spt imageshack, photobucket.dsb.
Langkah memasang ke dalam blogger:
Pergi ke layout>edithtml, cari kod <head>dan letakkan script ini di bawahnya:
<script src='http://geocities.com/aerieff/jquery.js' type='text/javascript'/>
<script src='http://geocities.com/aerieff/interface.js' type='text/javascript'/>
<link href='http://geocities.com/aerieff/style.css' rel='stylesheet' type='text/css'/>
Kemudian, cari kod </body>, letakkan kod ini sebelum kod tersebut.
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>langkah terakhir, letak kod dibawah selepas kod ini <body>.
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.boonto.blogspot.com"><img src="http://geocities.com/aerieff/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.boonto.blogspot.com"><img src="http://geocities.com/aerieff/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.boonto.blogspot.com"><img src="http://geocities.com/aerieff/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
Anda perlu ubah kod diatas iaitu gantikan URL (http://boonto.blogspot.com) dengan Url yang anda mahukan. Anda juga boleh mengubah icon (http://geocities.com/aerieff/rss.png) dengan icon anda sendiri. Untuk menambah elemen baru hanya tambah kod dibawah ni dan ulang langkah mengubah url dan iconnya sahaja:
<a class="dock-item" href="http://www.boonto.blogspot.com"><img src="http://geocities.com/aerieff/rss.png" alt="rss" /><span>RSS</span></a>
__________________________________________
Untuk meletakkan dock menu ini seperti yang saya buat pada blog ini.
anda perlu menambah css code ini=
#dock{
position:absolute;
margin-top:100px; margin-left:130px; }
sebelum kod ini
]]></b:skin>
anda hanya perlu ubah margin-top dan margin-left sahaja mengikut kesesuaian anda.
Jika ada sebarang masalah boleh beri komen dibawah, maafkan jika banyak kesalahan kerana ini tutorial pertama aku. Nobody perfect right?..hehe
UPDATE: Contoh Yang Kreatif Boleh lihat di blog ini:
1. Blog Amey Atau
2. Blog Bunny
Posts
0 comments:
Post a Comment