Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Css Dock Menu ala Macintosh

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 komentar:

  1. 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 =))

    BalasHapus
  2. Wah.... Oom selalu ada yang baru ... ;) gak rugi dech kalo sering2 singgah

    BalasHapus
  3. waoooo keren langsung di comot ah :X :X

    BalasHapus
  4. wah keren baget nih om, inofasi tiada henti memang si om, langsung di coba om :)

    BalasHapus
  5. weleh aq udah punya firasat kalo ada yg baru di OOM nih.. good tuts om.. :p

    BalasHapus
  6. wew...keren om...:)
    jadi teringat pas pake desktop widget di xp dulu...
    gak nyangka bisa dipasang di blogspot...
    hebat om..!! ;)

    BalasHapus
  7. @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

    BalasHapus
  8. om,gimana sih caranya mem-paste script/kode HTML ke blog kita? maap nih, saya masih newbie banget. terimakasih

    BalasHapus
  9. 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)

    BalasHapus
  10. Wahh cocok bgt nih buat menu blog-ku, cobain Aaa..... :D

    BalasHapus
  11. 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 ...

    BalasHapus
  12. 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(

    BalasHapus
  13. 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 :))

    BalasHapus
  14. tipis2/7/08

    mangkin mauuuudeeeek si om nih. kapan buka sekolahan blogger om??

    BalasHapus
  15. memberatkan loading blog ga ya om kalo pasang ini???

    BalasHapus
  16. Tutorial yang menarik. Pasti asyik tuh kalau di pasang.

    BalasHapus
  17. asyik tuh kalo dipasang di blog....ngomong2 beratin loading blog nggak om? wah, om emang jawaranya blogger indonesia :)

    BalasHapus
  18. @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

    BalasHapus
  19. kuereeennn...tapi gmn ga punya mac nih

    BalasHapus
  20. 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

    BalasHapus
  21. 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?

    BalasHapus
  22. wow.. itu yang kyk menu di apple jg khan yah kk?

    buat menu gitu brarti flash donk? kereeen.. *ngiler*

    BalasHapus
  23. wah inovasi yang keren, kapan2 tak coba ya om.

    BalasHapus
  24. Untuk yang ini terpaksa ga bisa praktek dehh :(
    Ga punya GooglePages sih.. Klo Yellow Pages bisa??
    **KAbUUUUrrrrrrrrr**

    BalasHapus
  25. @satona : bener de verena like mac ya :D

    BalasHapus
  26. wah.. mantep bener om...
    memperlambat loading gak ya ??? hhmm...

    BalasHapus
  27. keren mas.. tambah lambat pa ga ya...

    BalasHapus
  28. @anang & ujan : gak bikin lambat asal icon nya gak kebanyakan :)

    BalasHapus
  29. Syamsul4/7/08

    Om apa kabar, salam kenal dari aku,udah daftar email O-om.com artikelnya bagus2.

    BalasHapus
  30. Manteb neh om coba di wp ku ah, bisa ga yach? ;))

    BalasHapus
  31. @syamsul : thanks ya dah daftar omail :)

    @putra: tentu bisa eka :)

    BalasHapus
  32. kang Ahmad12/7/08

    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!

    BalasHapus
  33. @kang Ahmad : sepertinya gak ada yang gak memenuhi syarat mas, coba masukan ke google webmaster tools :)

    BalasHapus
  34. Wih keren oM

    BalasHapus
  35. Wih keren oM

    BalasHapus
  36. wawunx15/7/08

    akhirnya tips and triks buat blogspot keluar lagi
    langsung kupraktekin di blogku ah..........
    :D

    BalasHapus
  37. Anonim15/7/08

    http://www.designhelp4you.blogspot.com/

    http://www.softwarecomplex.blogspot.com/

    http://ebookhelper.blogspot.com/

    BalasHapus
  38. Anonim16/7/08

    O-om gimana caranya supaya dock menunya tetap ada di footer maksudnya fix footer (tapi bukan bagian footer halaman dari blog lo)

    BalasHapus
  39. @Agung : kalo itu harus diletakan di bawah tag < bodi > tepatnya dbawah 'outer-wrapper'

    BalasHapus
  40. Mas Agus Ni Dari Pandu_17/gerakan pramuka SMP Negeri 3 Mojoagung. Mas Bantuin donk cara abuat window qta bisa bergoyang.....

    BalasHapus
  41. @pandu_17: aduh...goyang gimana nih maksudnya :D

    BalasHapus
  42. 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.

    BalasHapus
  43. 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!

    BalasHapus
  44. Tes tes Di coba ah....!!!!

    Makasih tutorialnya mas

    BalasHapus
  45. manatb 0-0m ginian perlu dicoba..

    BalasHapus
  46. Anonim29/9/08

    klo di pasang di friendster bisa ga yua...

    BalasHapus
  47. faoezan29/9/08

    b-( tanx bos

    BalasHapus
  48. OM yang ini udah ga bisa di pake lagi Pages.google.com) trus mesti di simpen kmana ya? ada yang laen ga? mohon pencerahannya

    BalasHapus
  49. Btw tuh menu dock kayak di websitenya teknolagi.com ya=))? Gw juga pake tuh, yah keduluan deh sama tutorial lw

    BalasHapus
  50. keren22xx.....;)) oom emang topjer deh....
    tapi jelasin juga pages.google.com nya....

    i'm newbie

    thanks oom

    BalasHapus
  51. mas cara memasang bggroundnya gmana

    BalasHapus
  52. om kq susah amat yah, btw dah ada yng berhasul lom sih

    BalasHapus
  53. haoi....gue tantang siapa yag udah praktekin yg punya blog aja lom praktejin

    BalasHapus
  54. 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 :)

    BalasHapus
  55. Kodenya itu iepngfix.htc gak dimasukin ketinggalan nulisnya tuh...;)
    by the way oom punya alamat email yang bisa diajak chatting

    BalasHapus
  56. punya aq ga bisa mas ....gambar nya g nongol

    cuma tulisan doang itu gimana tuh??
    :D :)

    BalasHapus
  57. Anonim19/9/09

    guna trik macintosh best jg tp tak ramai yg pakai dock menu ini. :)

    BalasHapus
  58. wah interface.js situs resminya apa y,,?

    mau cari documentationnya... thx

    BalasHapus
  59. Anonim23/10/09

    Sukses selalu om...Mantaaab...!!!

    BalasHapus
  60. om gimana kalo pasang dikiri om, trus dia vertikal, codeny ada yg diganti gak.

    BalasHapus
  61. bos... ko q ga bisa masang css yah.. maklum baru mulai nih... ajarin donk.... thanks

    BalasHapus
  62. WoW... udah lama nggak berkunjung, eh udah ketinggalan banyak nih... ok deh pelan2 ikutan nyusul dah... Up

    BalasHapus
  63. wadduuhh otak ane blm smpai sana gan.... makasih dech dah di share ilmunya

    BalasHapus
  64. wah bingung juragan....

    BalasHapus
  65. gambarny bisa dganti gk om?

    BalasHapus
  66. wah ane kagag tau nich apaan....

    BalasHapus
  67. sudah saya coba pada template terbaru blogger, tapi koq??

    BalasHapus
  68. langsung ane coba gan... makasih tutornya sangat membantu

    BalasHapus

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel, karena semua komentar akan saya moderasi terlebih dahulu sebelum ditampilkan. Thanks :)

 

Back to Top