Dock Menu
Snapshot
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivkDoSbi_8VJur6daVpmB5cHf4RY18-i3Df9cR3qHswlTjxJ2tEPi_hyt_oQRInsSxV8a7l_fszWo1rHVMMxmkPGqX245rMsXzMmfKV_4ggmz6DDyHy5lASjMlyl2963YtFeC81BSd5Ao/s1600/Icon_Home.PNG"/><span>Tajuk</span></a>
<a class="dockItem" href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEvxN4S1PWV0EjhzZ7QJM5hG8o8JvV7FTaW4hIhyphenhyphenYTgWB-InNIPF9rjQmKoJ7ix0mooBT70X_-eQ8cYihqWkkyeVNzPNUnMtol_nm0ZCh2k0xQFdBGCd7ByM3GLz3UknFby3mx-EDc0o/s1600/Icon_Rss.PNG"/><span>Tajuk</span></a>
<a class="dockItem" href="URLe"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0Ol8ehBkAa-e7w0KBMpasyMlvX-NxZcoHwUAsB76iKxCdf6M4n3A4Rb2IRAcbWM-jd2RJg6Qiaq9Vqu1EF07vPECiNRLgIa8gpPYbn0a-yx4BS_n4dqH-EWsT84wqDw0ietz6yka7aA/s1600/Icon_Twitter.PNG"/><span>Tajuk del enlace</span></a>
<a class="dockItem" href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5JcFL3ACTOKWJWwjYQHl5vSP7-kHwjZCTL9hNAmAz4NuNXBspSx5PfZF43z1PStonRUEGUNKjXMG_u2hqnaZvkb-6sl5ZEpoUgIkt6IYirYgqxV4TjPwLBUEF2DqCG47iaGVAxQOitxM/s1600/Icon_Facebook.PNG"/><span>Tajuk</span></a>
<a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBASPZYMVNBL5SHYwoPtfb3E_wR9BjCKm3e6s2ytMBewFcWl_9dpKcB2VoqZj_gAA-HdZy9gF-ow9owH-WIMZzpnQiwzgFPSFKHJPsxOLB4-iyUU4CFKbX773rgr_gv5Xn4ySztL0a28A/s1600/Icon_Picasa.PNG"/><span>Tajuk</span></a>
<a class="dockItem" href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOaFdVRu84fvVaubIfov5R3wYMtqX_e-ke0ATxRXIx6MYscyTIlU0PAJbNB6_aBpcPKyOpdp3IXpwW5bSFe7jWVZ4XrJyPtRIh6k7UlLqf7XtgmsKSNsOVP5lDXBo-WPDqRdlWYJvNaIY/s1600/Icon_Mail.png"/><span>Tajuk</span></a>
<a class="dockItem" href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVhN7aRogwx21uY_gGaNOz93fyzfOTIHqbR0vkTze8Y9rv_dnaeTQ-GBE1Xixl9qmhJGVimYx5roIGvHOKtcT4fHD3dcrWJE_BGDS1flVnyX_Ip1lg8mriPNRHdK-SQZTYyVKPkvzY8M/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.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.