Css Dock Menu ala Macintosh Di Blogger
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 imagesanda 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'/>
<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>
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</html>
</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>
<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 (aplikasiterunik.blogspot.com)
Posting Komentar