Senin, 11 April 2011

Membuat Dock Menu Ala Macintos

Banyak yang bertanya tentang yang satu ini. Tapi saya pada waktu itu capek banget jadinya sempatnya sekarang. Oke mari kita mulai...


Gambar Dock menu ala Mac

1. Masuk ke menu Edit HTML, cari kode <head> dan letakan script ini di bawahnya

<script src='http://www.geocities.com/ainoonmuchfoodin/jquery.js' type='text/javascript'/>
<script src='http://www.geocities.com/ainoonmuchfoodin/interface.js' type='text/javascript'/>
<link href='http://www.geocities.com/ainoonmuchfoodin/style.css' rel='stylesheet' type='text/css'/>




2. Masih pada halaman Edit HTML, cari code </body> kemudian letakan file dibawah ini diatasnya

<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>

3. Simpan Template

4. Setelah itu tuju tatalatek ==> pilih add a gadget ==> pilih HTML/Javascript ==> Copy Paste kode dibawah ini dalam kotak yang telah di sediakan

<div id="dock" class="dock">
<div class="dock-container">
<a class="dock-item" href="http://iahhaku.blogspot.com/"><img alt="home" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/home.png"/><span>Home</span></a>
<a class="dock-item" href="http://www.yahoo.com/"><img alt="email" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/email.png"/><span>Email</span></a>
<a class="dock-item" href="http://iahhaku.blogspot.com/search/label/Tugas%20TKJ"><img alt="portfolio" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/portfolio.png"/><span>My Task</span></a>
<a class="dock-item" href="http://stafaband.info/"><img alt="MP3 Download" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/music.png"/><span>Music</span></a>
<a class="dock-item" href="http://youtube.com/"><img alt="video" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/video.png"/><span>Video</span></a>
<a class="dock-item" href="http://iahhaku.blogspot.com/feeds/posts/default?alt=rss"><img alt="rss" src="http://i434.photobucket.com/albums/qq62/ainun_machfudin/rss.png"/><span>RSS</span></a>
</div></div>

Ganti kode yang berwarna biru tersebut dengan link yang anda tuju. Oke selamat berexperiman...



by : iman kyen

Tidak ada komentar:

Posting Komentar