Membuat dan Memasang Menu Mac Doc di Blog

Pernahkan kamu melihat tampilan blog yang cantik dengan hiasan berupa menu yang jika disorot akan membesar dengan efek transisi yang halus? 

Kalau pertanyaan itu diberikan pada saya maka saya jawab, iya, bahkan saya sangat tertarik ingin mencobanya. Menu tersebut lebih terkenal dengan istilah Mac Doc, karena mungkin ide awalnya mencontek menu-menu Doc dari tampilan OS Mac.

Kemudian, setelah cukup lama saya mempelajarinya akhirnya hari ini saya pasang juga hasil kreasi unik tersebut disalah satu blog saya. Namun di blog saya tersebut bukan menu-menu profil atau semacamnya yang saya pasang, menu yang saya pasang saya gunakan untuk menampilkan tombol-tombol jejaring sosial, sehingga bagi pengunjung yang ingin berinteraksi lebih lanjut dengan kita melalui jejaring-jejaring sosial tersebut dapat langsung klik melalui menu Doc tersebut.

a. Tampilannya:

Menu yang tersedia disini meliputi: Delicious, Digg, Facebook, Reddit, Technorati, Twitter, Google +, dan bonus untuk menu menuju halaman Kontak, dan juga RSS Feed. Kurang lebih tampilannya sebagai berikut:

Tampilan menu mac doc

b. Cara memasangnya:


Jika anda ingin memasangnya caranya sangat mudah, cukup Copy saja Script kode berikut ini, lalu masukkan ke widget blog anda. 


Memasukkan ke widget juga sangat mudah, dari halaman Design - Element Laman, lalu tambahkan Gadget, pilih HTML/Javascript. Pastekan script berikut didalamnya, lalu Save.

Kodenya Gan:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://wahyuwinoto.googlecode.com/files/tampilan.js"></script> <style> /* social media melayang */ .macsosial { position:fixed; top: 5px; } #dock2 { width: 100%; bottom: 0px; left: 0px; } .dock-container2 { height: 60px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVEm5zdBYd0-2jWiOOOvYlBO1zijgV6wx1Rc59YkSkt9RbgBJEisi4dSs2O1x8VE3ZZ5nY2_Z3NvjMBxe40X15YPyczNZ9og7KzySm6gucGojhhaLlBNvglk_bm4HtzVpw8ls4ESEIZd8/s1600/quote.jpg); padding-left: 20px; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; } .dock-item2 span { display: none; padding-left: 20px; } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; } </style> <div class="macsosial"> <div class="dock" id="dock2"> <div class="dock-container2"> <a class="dock-item2" href="ISI DENGAN URL ANDA"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiku2680WfXCmncmJNdU6YKn0I1a3rzsO_hyXbqpDU71y5Fg58bfUOSHRNHC2tFwnmHw8uaaeMQ7y8dA11obj2k1-eUPkTg0rU-R-bLeDeXF3tTd1ki2_ukwYoGnnEjdlPJMhQ6pXQKv4k/s1600/delicious.png" alt="delicious" />Delicious</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyJuc9DCdWWtrLpq4zglBtfxv5Sla3tCBFyeweCm75eng047rd7sYbpzGgSixlxJonj8CjnaF6BKyoLdPTv2mlCwcGplynGzoQnZFGBleQhMgIothnjJxI3TtcGDCY0MmEry8l_PAHDgs/s1600/Digg.png" alt="Digg" />Digg</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxEYHzkO6vTckgWr_krDmUI9XPmNfv0yFK799wU7yaQ12KSLjuFMynKL_wOS6ZmLtSouQx2BE3kIOgNyl4uJGA9qKx1ryPLM9q3EvljC1IEaNCVkazWX_2LksYrwsrspBr2son-Sekq8/s1600/facebook.png" alt="facebook" />Facebook</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzW5r-hpp9oAuc6ZagIf32aMR8s5R73sKAkdCYytNFx28_u_sFxCiJI2xjG0YhAdVpzw1ZJzzgskNmf6r9rWY0A_d869tHYYpoPZGwZD6oLl6e2F_4xp0RwQdM6mYvOkRZQRAMxfXUrY/s1600/reddit.png" alt="reddit" />Reddit</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvP8VLx91PbtUd9mgxmwkZ2ui_o5b_BAl_s6OnM8tOS-nQSCbyUIcceIzWHT9WQilIH5-eacKnC78MiF83Wjg7Avm1KKtK1CqjaUMPnuF8a3lU9uSJc7cC8YN6E7PQdszi87UMHFqleFg/s1600/Technorati.png" alt="Technorati" />Technorati</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgju1pZKRUm5gSOyVzZ2w3QRVlD5bqhq13WIcplXc8LF80W0U-pN2gPaA7h9W38yWQLtE24gyULY7iICuJs7RWu01e6E_Blq3i3NvDwkv6cJJbcIVnMfcsETvIm5xIfOWuos4QfWGG2UeE/s1600/twitter.png" alt="twitter" />Twitter</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrH_jtv2ntH1ySrWszTrEqD7pXM_UQGfZ-AUf0QelUECQWIJQxH97V5vHmAzhSLoGwXfZG86uOtjcRwHaaNTtMr6FiPlB8rs9VEBoYvUZXX80CfzBQfLKbKqc59k8n39nUPKzYhPGO6rw/s1600/googleplus.png" alt="googleplus" />Google +</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTMKZSOS0l27ejWPpAAiajcDEPkaVOFrtIIf0eTt2AwqfRMQh-BhIqdGtXSXju-AGkB7scDAw7Nql4K1c-M8xvIkuFbJ_ggxqS-iqSRCf89Sm-x_8Vde-Ce8baviIjH79GKyHHi7Ekdk/s1600/email.png" alt="Email" />Kontak</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyAn5HkJOJSYJkdhKasg7COTMrwmnCSB631a4gDJegLRZC49n8V8tcDT2F-VF8tRWEiFpiwMb8p1MvGL80uOLPZnB8V-T1lLTk2wCE94zRzFw0Mk0s7osUFYzSPJGyFwMQTRdErx2l3A/s1600/rss2.png" alt="rss" />RSS</a> </div> </div> </div> <script type="text/javascript"> $(document).ready( function() { $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'top', halign : 'center' } ) } ); </script>

c. Modifikasi

Anda dapat juga memodifikasi tampilannya, misal pada bagian :

- valign: 'top', bisa anda ganti dengan valign: 'bottom', jika anda ingin agar Mac Doc tersebut tampil dibawah halaman. 

- Panjang atau lebarnya bisa juga nada sesuaikan tinggal mengganti angka-angka dalam kode diatas.

- Kemudian, misalnya anda kurang suka dengan gambar-gambar dalam menu tersebut dan ingin menggantinya caranyapun sangat mudah, anda tinggal ganti URL gambarnya dengan URL gambar punya anda sendiri, contoh gambar-gambar yang bisa anda gunakan untuk membuat menu Mac Doc cantik misalnya:

Berikut ini contoh gambar menu-menu yang bisa anda jadikan referensi sesuai dengan jenis menu yang ingin anda buat, misal untuk menu Arsip, Menu Kontak, Menu Link, Menu Mobile, Download, Musik, Profil, Foto, RSS dan sebagainya:

Gambar diatas hanya contoh saja, anda bisa nanti menggantinya dengan gambar koleksi sendiri.

Selamat bereksperiment dengan membuat tampilan menu mac doc untuk memperindah tampilan blog anda.