Kamis, 20 Januari 2011
Membuat Dock Menu di Blog
Selamat siang temen-temen semua, gimana nih kabarnya? Pada siang hari ini saya akan berikan spesial menu untuk tutorial blog, yaitu Dock Menu. Apa itu dock menu? saya sendiri kurang paham tapi jika temen-temen yang biasa memakai windows Vista pasti tahu. Itu lho, menu yang terdapat di halaman depan, letaknya diatas yang jika kursor kita letakkan di salah satu icon tersebut maka ikon itu akan mendekat. Lebih jelasnya seperti gambar di bawah ini.
Cara kerja dock menu seperti ini, jika anda arahkan kursor mouse ke icon dock menu maka akan terjadi perubahan ukuran icon. CSS Dock Menu bisa anda dapatkan dengan mudah di internet. Ada banyak varian dari Dock Menu ini. Salah satunya yang dibuat oleh Ndesign-studio.com. Mungkin anda pernah melihat gambar di diatas pada Windows, Macintosh dan beberapa OS lainnya.
Ndesign-studio.com sudah menjelaskan tutorial membuat dock menu. Namun terus terang saya merasa kesulitan untuk mengikutinya. Demikian juga dengan banyak tutorial yang sudah saya coba, ternyata ada yang cacat pada kode CSS-nya. Nah, setelah membandingkan beberapa cara membuat dock menu, ternyata belum ada satu pun yang memuaskan (saya kebingungan). Akhirnya saya coba memadukan dan membuang beberapa kode CSS yang tidak perlu, menambahkan kode CSS dan membuat versi sendiri. Baik, akan saya bagikan kepada temen-temen semua. Berikut langkah-langkah pembuatannya :
PERTAMA
Download file CSS dock menu zip package. Lalu unzip file-nya. Lihat di dalam folder JS ada 2 file javacript yaitu interface.js dan jquery.js. Sedangkan di folder images ada file gambar. Silahkan upload file interface.js dan jquery.js ke javascript hosting anda dan upload file gambar ke image hosting anda. Kalau saya biasanya memakai Google Sites untuk hosting JavaScript dan pakai tinypic.com untuk hosting gambar. Nah, silahkan mau dihosting di mana, yang pasti host directory bisa anda akses dengan mudah. Untuk kemudahan dan kelancaran, silahkan menggunakan semua alamat JS dan alamat gambar yang sudah saya siapkan pada tutorial ini.
KEDUA
- Login ke blogger dengan id Anda.
- Silahkan tuju Tata Letak.
- Pilih Edit HTML.
- Backup template dengan klik Download Template Lengkap.
- Cari kode <head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:
<head><script src='http://sites.google.com/site/hostingfreesite/javascript/jquery.js' type='text/javascript'></script><script src='http://sites.google.com/site/hostingfreesite/javascript/interface.js' type='text/javascript'></script>
KETIGA
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan letakkan kode berikut di atasnya, sehingga menjadi :/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;color: #000;font-weight: bold;text-decoration: none;width: 40px;position: absolute;display: block;bottom: 0;}.fisheyeItem img{border: none;margin: 0 auto 5px auto;width: 100%;}.fisheyeItem2 img{border: none;margin: 5px auto 0 auto;width: 100%;}.fisheyeItem span,.fisheyeItem2 span{display: none;positon: absolute;}.fisheyeContainter{height: 50px;width: 200px;left: 500px;position: absolute;}#fisheye2{position: absolute;width: 100%;bottom: 0px;}]]></b:skin>
KEEMPAT
Masih di Edit HTML, sekarang kita akan menempatkan id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti bisa menempatkan id css dock menu di mana saja sesuai kebutuhan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun bisa. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya di bawah header.
- Cari kode :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
- Letakkan kode berikut di bawahnya, sehingga menjadi :
<div id='header-wrapper'>..................</b:section></div><div class='fisheye' id='fisheye'><div class='fisheyeContainter'><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a><a class='fisheyeItem' href='http://freedownloadcopasthemes.blogspot.com'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a></div></div><script type='text/javascript'>$(document).ready(function(){$('#fisheye').Fisheye({maxWidth: 15,items: 'a',itemsText: 'span',container: '.fisheyeContainter',itemWidth: 30,proximity: 70,halign : 'center'})});</script>
- Sekarang klik tombol SIMPAN TEMPLATE
- Selesai
Keterangan :
- Untuk alamat freedownloadcopasthemes.blogspot.com, silahkan ganti dengan link yang anda siapkan.
- Untuk alamat link gambar berwarna pink, bisa juga anda ganti dengan gambar yang sudah disiapkan tentunya.
- Ganti dan rubah beberapa kode CSS di atas. Misalnya anda ingin mengubah ukuran itemWidth: 30, proximity: 70, dan lihat efek animasi yang berubah. Demikian juga dengan beberapa kode CSS lainnya.
Jika anda sudah selesai, kemudian lihat hasilnya. Jika kurang jelas atau Dock menu-nya tidak jalan bisa tanya ke kotak komentar yang ada di bawah. Selamat berkreasi dan semoga bermanfaat.
Label: