Dock menu adalah menu dengan gambar horizontal yang apabila gambarnya disentuh dengan mouse, akan muncul tampilan yang menarik. Salah satu website yang menyediakan layanan dock menu dengan CSS adalah N-design-studio.com. tapi disini saya akan memberikan trick bagaimana cara mebuat dock menu dengan CSS juga tentunya. Tertarik? Silahkan simak trick berikut ini.
Langkah yang perlu dilakukan untuk membuat CSS Dock Menu ada pada blog anda ialah:
1. Download Script code CSS nya Disini!.
2. Lihat Disana anda Folder JS (terdapat 2 file Script) yaitu Interface.js dan jquery.js Buka Juga folderImages untuk mendapatkan icon menunya. Upload semua File tersebut dan simpan pada Host Directorynya masing-masing.. Boleh juga anda menyimpannya pada Google Page Creator
3. Kalau sudah menyelesaikan Semua pengUploadtan filenya.. Silahkan masukke langkah selanjutnya
Cara Pemasangannya Pada Blogger
1. Masukke Edit HTML dan cari kode <head> Kalau sudah ketemu Letakkan script ini dibawahnya:
<head>
<script src='http://google.pages.com/jquery.js' type='text/javascript'/>
<script src='http://google.pages.com/interface.js' type='text/javascript'/>
<link href='http://google.pages.com/style.css' rel='stylesheet' type='text/css'/>Warna merah merupakan alamat directory, ubahlah alamat tersebut sesuai dengan path directory masing-masing
2. Selanjutnya cari kode </body> Letakkan script yang ada dibawah ini, diatas kode </body>. Seperti ini:
<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>
</body>
</html><div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.lulukafida.co.cc/"><img src="http://google.pages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>Warna Hijau Menunjukan alamat URL yang dituju ganti sesuai alamat URL yang anda tuju dan warna Merah Menujukkan path directory untuk warna merah ganti sesuai path directory anda.
Mengerti Programming dapat mempermudah anda mengerti pemasangan dan peletakkan script-script code.
Selamat Mencoba.. Dan Semoga bermanfaat.
Ichiykun for Indonews.org
