Dock Menu

Snapshot

Deskripsi:Apabila mouse digerakkan ke salah satu menu yang berbentuk bulat itu akan membesar dan akan keluar tajuk bagi menu tersebut


Langkah Pemasangan:

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
</head>

Pastekan kod dibawah sebelum/diatas kod </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://aidealfitri.webs.com/interface.js' type='text/javascript'/>


*sila hostingkan sendiri kod:http://aidealfitri.webs.com/interface.js ini pada mana mana web free hosting selepas download kalau boleh.

Klik untuk download skrip

3.Seterusnya cari kod ]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin>


/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}


4.Klik save template

5.Pergi ke layout page atau design-->Add a gadget-->Html Javascript

Pastekan kod dibawah dekat situ

<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL"><img src="http://3.bp.blogspot.com/_qgZA1ny_dAs/S8yeGOygORI/AAAAAAAAECk/MabUFPSv1CA/s1600/Icon_Home.PNG"/><span>Tajuk</span></a>

<a class="dockItem" href="URL"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeGum8szI/AAAAAAAAEC0/ogrG1G_NSaQ/s1600/Icon_Rss.PNG"/><span>Tajuk</span></a>

<a class="dockItem" href="URLe"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Tajuk del enlace</span></a>

<a class="dockItem" href="URL"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeFsjwO4I/AAAAAAAAECc/URJd0EO38d0/s1600/Icon_Facebook.PNG"/><span>Tajuk</span></a>

<a class="dockItem" href="URL del enlace"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S8yeGYiAfpI/AAAAAAAAECs/ej5Vj7cAj68/s1600/Icon_Picasa.PNG"/><span>Tajuk</span></a>

<a class="dockItem" href="URL"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/><span>Tajuk</span></a>

<a class="dockItem" href="URL"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/s1600/Icon_Help.png"/><span>Tajuk</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>


6.Save dan lihat hasilnya.

*URL adalah link yang akan korang beri untuk setiap senarai dock menu korang dan Tajuk adalah nama senarai dock menu korang.

Ulasan

Catatan popular daripada blog ini

KOLONEL SANDERS-PENGASAS KFC

Blog Tutorial:Aneka Gambar Untuk Header Bertukar-Tukar