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)
75 comments:
Emang ikon ala mac itu keren2 mas, palagi Linux. Techno abis. Tapi yang gak kalah penting aku mau coba dan .. PERTAMAX :D! Elpiji naek lagi =))
Wah.... Oom selalu ada yang baru ... ;) gak rugi dech kalo sering2 singgah
waoooo keren langsung di comot ah :X :X
wah keren baget nih om, inofasi tiada henti memang si om, langsung di coba om :)
weleh aq udah punya firasat kalo ada yg baru di OOM nih.. good tuts om.. :p
wew...keren om...:)
jadi teringat pas pake desktop widget di xp dulu...
gak nyangka bisa dipasang di blogspot...
hebat om..!! ;)
wahh keren nihhh ooom :p
@MICK: silahkan dicoba mick
@dunia herbal : thanks dah sering singgah
@noval : yuuuuuuu silahkan dicomot noval
@eko: rada berat ko tapi dicoba aja dulu :)
@fachia : weh si fariez firasatnya akurat terus nih :))
@syahuri : iya mirip yang di widget xp ya
@bocah iseng : yu langsung dipasang kalo kren :D
om,gimana sih caranya mem-paste script/kode HTML ke blog kita? maap nih, saya masih newbie banget. terimakasih
oh iya om, bedanya XML sama HTML itu apa ya? kalo mo ngopi scriptnya ebook om itu pakeXML atau HTML? (duh, maafkan kalo ptanyaannya basic bgt)
Wahh cocok bgt nih buat menu blog-ku, cobain Aaa..... :D
belum pernah lihat Macinthos oom :D , asyik juga ya... bisa kelihatan lembut tampilan blog ... bisa dipasang di WP nggak ya ....
Kalau sekali-kali posting buat pengguna WP gimana oom, kurang pencerahan nich saya ...
bagus abis......nih... lama ga mampir kesini om... jd bnyk yg berubah :D
oya ap ga tambah berat... klo dikasi menu kyk gitu???
coba emoticonnya aahhh... :P ~x(
nggak bisa komen lagi deh ,gile..ck..ck bener2 nggak ada matinye
btw aku inget Gg-spot terus asal ke blogmu ini oom :D suer , kau racuni aku :))
mangkin mauuuudeeeek si om nih. kapan buka sekolahan blogger om??
memberatkan loading blog ga ya om kalo pasang ini???
Tutorial yang menarik. Pasti asyik tuh kalau di pasang.
asyik tuh kalo dipasang di blog....ngomong2 beratin loading blog nggak om? wah, om emang jawaranya blogger indonesia :)
@shafa: Caranya seperti biasa mas copy-paste aja langsung
@feri:silhakna dicobain feri :)
@arif : aku juga nyobainya waktu pameran amas arif hehehe
@wibi: gak terlalu berat juga ko :)
@free-7:hati hati keracunan benar suhu hehehe
@tipis: ini sudah buka sekolah olinenya :D
@tony : kayaknya gak juga mas tony
@kombor: di wordpress juga bisa kang..coba ja :)
@ranggalawe : silahkan dicoba dulu ranggalawe :D
kuereeennn...tapi gmn ga punya mac nih
mantabz beut,,,hehe,,,
T O P , B G T dech si oom nih hehe,,, tapi kayana berat,,hehe,,kpn2 aja coba di blog lain :D
Aduh Oom... belum pernah pake MAC nih. Tapi kalo dilihat tampilan pada gambar, mirip-mirip Linux ya.
By the way, sudah ada bocoran belum Oom kapan Google akan update PR lagi?
wow.. itu yang kyk menu di apple jg khan yah kk?
buat menu gitu brarti flash donk? kereeen.. *ngiler*
wah inovasi yang keren, kapan2 tak coba ya om.
Untuk yang ini terpaksa ga bisa praktek dehh :(
Ga punya GooglePages sih.. Klo Yellow Pages bisa??
**KAbUUUUrrrrrrrrr**
@satona : bener de verena like mac ya :D
wah.. mantep bener om...
memperlambat loading gak ya ??? hhmm...
keren mas.. tambah lambat pa ga ya...
@anang & ujan : gak bikin lambat asal icon nya gak kebanyakan :)
Om apa kabar, salam kenal dari aku,udah daftar email O-om.com artikelnya bagus2.
Manteb neh om coba di wp ku ah, bisa ga yach? ;))
@syamsul : thanks ya dah daftar omail :)
@putra: tentu bisa eka :)
om...sy pemula om blm ngerti bnyak ttg bikin blog yg buaek dan pas...1 minggu yg lalu sy bikin blog di www.indonesian-brain.blogspot.com, tp ga mmenuhi syarat masuk di google,..kira2 langkah apa yang harus sya benahi om--sory om, sya kurang tahu bnyk ttg bhs2 komputer,,pa lagi bikin2 script..tolong om..ksh solusi bwt sya..makasih!
@kang Ahmad : sepertinya gak ada yang gak memenuhi syarat mas, coba masukan ke google webmaster tools :)
Wih keren oM
Wih keren oM
akhirnya tips and triks buat blogspot keluar lagi
langsung kupraktekin di blogku ah..........
:D
http://www.designhelp4you.blogspot.com/
http://www.softwarecomplex.blogspot.com/
http://ebookhelper.blogspot.com/
O-om gimana caranya supaya dock menunya tetap ada di footer maksudnya fix footer (tapi bukan bagian footer halaman dari blog lo)
@Agung : kalo itu harus diletakan di bawah tag < bodi > tepatnya dbawah 'outer-wrapper'
Mas Agus Ni Dari Pandu_17/gerakan pramuka SMP Negeri 3 Mojoagung. Mas Bantuin donk cara abuat window qta bisa bergoyang.....
@pandu_17: aduh...goyang gimana nih maksudnya :D
Om, salam kenal, saya msh baru banget di dunia internet n lagi coba buat blog..mo tanya kalau upload itu gimana caranya...? atau tolong rekomendasi web yang menerangkan hal tsb..saya sangat tertarik dengan menu ala machintosh ini..makasih ya om.
wow.. ini dia yg dari tadi saya cari... ada juga versi bahasa indonesianya :D . mantap... Ini mau tak taroh di blog saya... kalo berhasil nanti saya konfirmasi... thx!
Tes tes Di coba ah....!!!!
Makasih tutorialnya mas
Sukses :D
Keren ung...
manatb 0-0m ginian perlu dicoba..
klo di pasang di friendster bisa ga yua...
b-( tanx bos
OM yang ini udah ga bisa di pake lagi Pages.google.com) trus mesti di simpen kmana ya? ada yang laen ga? mohon pencerahannya
Btw tuh menu dock kayak di websitenya teknolagi.com ya=))? Gw juga pake tuh, yah keduluan deh sama tutorial lw
keren22xx.....;)) oom emang topjer deh....
tapi jelasin juga pages.google.com nya....
i'm newbie
thanks oom
mas cara memasang bggroundnya gmana
om kq susah amat yah, btw dah ada yng berhasul lom sih
haoi....gue tantang siapa yag udah praktekin yg punya blog aja lom praktejin
ini postingan lama, dulu pernah om tampilkan samplenya di blog ini. karna sekedar sample aja jadi ya sudah dihapus. so ikuti saja cara diatas pasti bisa kok :)
Kodenya itu iepngfix.htc gak dimasukin ketinggalan nulisnya tuh...;)
by the way oom punya alamat email yang bisa diajak chatting
punya aq ga bisa mas ....gambar nya g nongol
cuma tulisan doang itu gimana tuh??
:D :)
guna trik macintosh best jg tp tak ramai yg pakai dock menu ini. :)
wah interface.js situs resminya apa y,,?
mau cari documentationnya... thx
trims tips nya :X
Sukses selalu om...Mantaaab...!!!
om gimana kalo pasang dikiri om, trus dia vertikal, codeny ada yg diganti gak.
bos... ko q ga bisa masang css yah.. maklum baru mulai nih... ajarin donk.... thanks
WoW... udah lama nggak berkunjung, eh udah ketinggalan banyak nih... ok deh pelan2 ikutan nyusul dah... Up
wadduuhh otak ane blm smpai sana gan.... makasih dech dah di share ilmunya
i'm newbie
thanks oom
wah bingung juragan....
gambarny bisa dganti gk om?
Kodenya itu iepngfix
wah ane kagag tau nich apaan....
sudah saya coba pada template terbaru blogger, tapi koq??
langsung ane coba gan... makasih tutornya sangat membantu
bgus tampilan nya :D
Poskan Komentar
Silahkan beri komentar dengan bijak dan jangan sampai komentar anda masuk dalam {COMMENTS SPAM}. Thanks