Membuat dan Memasang Menu Mac Doc di Blog.

Unknown | Senin, Mei 14, 2012 | Tutorial Blog Assalamu'alaikum sobat, semoga semua dalam keadaan sehat. Kali ini mari kita sama-sama belajar mengenai cara membuat dan memasang menu Mac Dog.
a. Tampilannya:

b. Cara memasangnya: Copy Script kode berikut, lalu masukkan ke widget blog anda.

  <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/AVvXsEgll3QepTNpnuKw8GTHM6Na6ITFnnhkf6RiQuW0NnviInJkCAt8AuBL_p21AbZ1-TjUvzZL6X88ZLRdPB0nDu7o9ISwXeczeYuXORgsNUi7e5qqdbW0EddsRnsAV5rQhBDaSIKROWkjI_Q/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/AVvXsEhAo3sd4bRwmMWX1rkehINQHG4fpX7RLkcwkfxX2vO9rLMlf1fpLx0YmocW2Ta4Ya2hUcH8VB5Xcjp1Vi2NGJ5eVKTQFdNlTtag6RaRyTyOZ7lQWlAmQKkx_wOPNEeKiTcqzrV-85p5vac/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/AVvXsEiQ3Ubuq5Gab6jNy-PAJdHQr7t5XpeaRKpJtYy93-IskfCC7PdNxa3AuRE9JEqvf7ddMEbVZzwirbC9GjHkOTPHC4QoLKpkEQhwQuBv8IW_KiqwXBQUfLPAp6Q6vrHKvGNzdwFFvy3HtQc/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/AVvXsEgG6C8Y3x5xtL_qJMYOQupqqhZlnN_UO8u_CnV9iUakV7_8i8AKY8jnWHH1RKjfgQtn64VHUzh3Z8SLeyAc9bmfEKAjiHCaP1srTirfWvQCkyEPJ4IMquGJErz_O-c4U435U-5xObOeHCs/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/AVvXsEj4hACsRwJdPJfURrmw50aKWiE6o0IHYDe1VlfS2hsI-aj5-e1Jofz-Wr1LaLkGLM4oPKRr1BipQo4WDu0xpkD9SOTtSOxAJv-6kdm6Ce2a4cbVJ6L-fC7mFFrbkRXiunqUnydMcCDna_E/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/AVvXsEjgjIlCIcjjHXspWMrx-axS9NeG-Ri2zCFQut6j-xKzwr1aEql_r4srjJqSkBWRJB_O88eNI4kTDXUsuKE47cSGCW3FuW2OLq50Qp324TXok7cxzw3HlMmVd4s0iilKJSbQQfzVc6id11w/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/AVvXsEhpXEqe2eUaipiLENFvhsnFBBtAECIrmIsPS6fRhPTGrDydUWhuokl-JqEQOcXqCmc_7Uv2gNXYVQAr4eqv4Ta_qZLj6Ce9z9LmbSB9T554sHzus17Ay97cmt2uXl5Jh4Yxo9a72ad4E0M/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/AVvXsEj60-lTOWFfv1CEPcEUa0Lpy_qAmlEfq2zL1pPdTUfY82MMkmPv-Rf4kK1e4hGr_qmJVp_iXPOHBIAED3LA9F4W4yJGXMLmYg2miIAjBjGzkensnUG5Ytmsg-_8e3Nf5LjlPGh7FwLFX2o/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/AVvXsEh6pW4M3XSkWMVnd60kzD4p3YQ77Zls4ylE3dRVYiLWXQUKu6TQtV8V37xjtmSo98AA7jZJrd1VTUNJ0ANQ2l294KTSZUmf6Z6APRvf04b4JOF2AJsnrwcCidnFzj10SK1igD57SUFHXqs/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/AVvXsEiDVnEgPy_IR2R5CM2ffo9uAyxicGS4F4XTVVcr96AbQ1rszJ-G8FDK3Ltwv0l45swuFcx4LwrhOXi43jTPmUGU59Xsiw_fIbk-IwKjdj3aHh7_X0g5Iwfj7mtdMZMp-d-uw9BJ0d6KSSA/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. 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. 

• ganti URL gambarnya dengan URL gambar punya anda sendiri. 

   

Admin : Unknown ~ The Journey Barlie's Blog

Artikel Membuat dan Memasang Menu Mac Doc di Blog. Semoga bermanfaat, untuk kritik dan saran silahkan klik poskan komentar dibawah atau tinggalkan pesan di CBOX. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.