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://creatingwebsite-maskolis.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a><a class='fisheyeItem' href='http://creatingwebsite-maskolis.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 creatingwebsite-maskolis.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.
0 komentar:
Posting Komentar