Pernah mencoba Dock Menu di komputer Macintosh? atau
paling tidak anda sudah pernah melihatnya. Kalo belum yo wes, yang jelas seperti gambar dibawah inilah contoh tampilan icon
Dock Menu. Dock menu layaknya di komputer MAC akan menampilkan efek icon bergaya aqua (Aquos), kita akan melihat perubahan size icon ketika mouse diarahkan ke bidang menu tersebut.
Ndesign-studio.com
merupakan salah satu situs yang menyediakan open source untuk Css Dock Menu.
Dari sekian banyak contoh koding Dock Menu layanan ini yang menurut om
paling mudah penerapannya. Untuk sample tampilan bisa anda lihat
disini. Sebenarnya di situs ini sudah dijelaskan secara singkat tutorialnya,
tapi lebih baik om jelaskan saja lagi biar lebih mudah.
Ikuti langkah pemasangan Dock menu :
1. Download dulu file
CSS dock menu zip package.
2. Kemudian Unzip filenya terlebih dahulu.
3. Dalam folder JS ada 2 file
javacript (interface.js dan
jquery.js) dan pada folder images anda akan
menemukan file gambar, silahkan upload semua file tersebut ke host
directory masing-masing (om sendiri menyimpan filenya di Pages.google.com),
kalo sudah silahkan buka kembali folder css-dock-menu,
ulangi lagi seperti langkah sebelumnya yaitu dengan upload file
iepngfix.htc dan
style.css
4. Sampai disini proses upload sudah selesai, langkah
selanjutnya cara pasang di blogger.
Cara pasang di blogger:
1. Masuk ke menu Edit HTML, cari kode
<head> dan letakan script ini di bawahnya seperti ini:
<head>
<script src='http://oom.blog.googlepages.com/jquery.js'
type='text/javascript'/>
<script src='http://oom.blog.googlepages.com/interface.js'
type='text/javascript'/>
<link href='http://oom.blog.googlepages.com/style.css'
rel='stylesheet' type='text/css'/>
Untuk warna pink diatas silahkan
sesuaikan dengan path directory masing-masing.
2. Masih pada halaman Edit HTML, cari code
</body> kemudian letakan file 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>
Langkah akhir tinggal ke proses pemasangan menu. Dock menu ini
bisa anda letakan diarea mana saja, bisa di elemen halaman blogger maupun di
halaman Edit Html. Untuk mudahnya anda bisa memasang langsung contoh penerapan
kode dibawah ini.
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/home.png"
alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/email.png"
alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/portfolio.png"
alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/music.png"
alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/video.png"
alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/history.png"
alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/calendar.png"
alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.o-om.com"><img
src="http://oom.blog.googlepages.com/rss.png"
alt="rss" /><span>RSS</span></a>
</div>
Warna merah diatas itu merupakan
link tujuan dan untuk warna pink diatas silahkan
sesuaikan dengan path directory masing-masing.
Untuk yang sudah mengerti programming tentu akan lebih mudah
lagi, anda bisa merubah sendiri code css dan javascipt maupun gambarnya sesuai
kebutuhan. karena ini tutorial untuk pemula jadi om jelaskan saja apa adanya.
Silahkan di kembangkan sendiri ya. thanks (o-om.com)
Tidak ada komentar:
Posting Komentar