Rabu, 26 Januari 2011

Memasang Menu Dock

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Tutorial kali ini saya akan membahas tentang Memasang Menu Dock atau Dock Menu. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu lansung saja saya mulai tutorial ini.

Menu DockKlik disini untuk melihat demo Menu Dock

  1. Masuk ke akun blogger anda
  2. Klik Rancangan, kemudian masuk Edit HTML
  3. Setelah masuk ke Edit HTML, centang Expand Template Widget
  4. Untuk anda yang ingin menggunakan Menu Dock dan letaknya berada diatas, anda cukup copy code yang ada di bawah ini saja
    5. .dock {
 position: relative; 
 height: 50px; 
 text-align: center;
}
.dock-container {
 position: absolute;
 height: 50px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNUHvG4G2IiTol1BQRF8B3hO1XMiw_wecEywrBT1GAUgizzgVIqCBuFdzlGvqUi3JPm75S1AUtX81bh5G6DC-Dd_SiA7WdzKiaZtETQbjygcftSojvmlZafADYj0v60W44nyyWlEi42tXz/s104/dock-bg2.gif');
 padding-left: 20px;
}
a.dock-item {
 display: block;
 width: 40px;
 color: #000;
 position: absolute;
 top: 0px;
 text-align: center;
 text-decoration: none;
 font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
 border: none; 
 margin: 5px 10px 0px; 
 width: 100%; 
}
.dock-item span {
 display: none; 
 padding-left: 20px;
}
    Untuk anda yang ingin Menu tersebut berada di bawah, anda cukup copy code yang ada di bawah ini saja 
    #dock2 {
 width: 100%;
 bottom: 0px;
 position: absolute;
 left: 0px;
}
.dock-container2 {
 position: absolute;
 height: 50px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPyeaPXfLtlfIruEqxruCAp9lOBz5YlFpMISk1qMfQgWEJSL83lktQsPzlJrtIy8ZaKBOImNS4Hq-s3rNMzmAXOyqDjDFbHG0ZXoT8sImy9DRYiyKe8OXdEcL_Sq-TL8lPaTXn5vVTRuU/s104/dock-bg.gif');
 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%; 
}
  5. Copy salah satu code tadi dan paste diatas
    6. </b:skin>
  6. Tambahkan framework jQuery.
    INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
    Jika belum terdapat framework jQuery, maka copy kode di bawah ini
    7. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
    kemudian letakkan di atas 
    </head>
  7. Setelah selesai, copy script di bawah ini
    8. <script type="text/javascript" src="http://dl.dropbox.com/u/22738692/MenuDock/js/interface.js"></script>
<style type="text/css">
.dock img { behavior: url(http://dl.dropbox.com/u/22738692/MenuDock/iepngfix.htc) }
</style>
  8. Kemudian paste di atas
    9. </head>
  9. Kemudian save template
  10. Kemudian masuk ke Elemen Halaman
  11. Klik Tambah Gadget, kemudian klik HTML/Javascript
  12. Masukkan salah satu kode ini, dan letakkan pada kotak konten
    13. Code di bawah ini adalah code untuk Menu berada di atas 
    <div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMT6wDnrUQHQ3fxN01RHgBx8b2kWLaYFrRUbOP9-AWd8xsAUiumAl249eVPJbVoAYb_pM42u0EQAjRyfQVdmD7VqVb39G6HovpUVNEJqoSCNUBgvg621d4tCVz9DFstIKM_mgzQ8DtfYRa/s1600/home.png" alt="home" /><span>Home</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEeIlXR7k7ThyOgvyP9mJ6GfuVydp-OkwRlz_VVAhpubM18iJtG1BRYf9uuJU9d5oHLwhpDnrAW9b_uNrTtQ8J1V0YbWRroF7rt4EYxg0bTwwuNE77Q8iI1ROSCOdbsVaTOH6b2m3s6Gt/s1600/email.png" alt="contact" /><span>Contact</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGi_yWxAnA43Ut9tQRm4vEOKEB-yuNsZAe89NHuVRIkyu0qG2GvZjezWhtyUNMpFsMucae3kyUdKSd-qqhYRTec3FXDxdQhSaaFBvgjHBP2KQEGw04_4_IpdphH2UCKubWZQchsEelB1c1/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkqyr3cOgyrBYRYhKe1FxIAcR612RagLyEbUqgMXOaq2ftEH9WLbBgeaoDhyphenhyphencNCZn2yP5opUnsdQ2oTJF2qVA_DiFclsG7IR-D_v_MNiNru019PmQJNhviDnfR502mvgGKXSzmldZ7D0c/s1600/music.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPyqna6mfU4tnsHZUTn1qfUHIMXoWBMRQblbfE5utM8p8a2tkTCPkfW6Bs0Q0izRlyAkAGNhuyyaQIQwG_fOqFlsufWqev4qVSsQ6f_v7FRfIW93Zd8h6GX7gh8Y8n_GCQpJ5fenucupN/s1600/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGv2ZaZMh3jlqaw2tMn7sEdEm-w1owDfjvSPVN3m_Muyf3tiTPf8AN6Ri22av8VS4GDLOp9aSTLZeQ7DOGU4D9BBE9SEHu9QfZED8HfUmCMm7jV_htBMohaDWByQDOxJTsGNJepdDRHWGh/s400/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzP4tTa7XoWNtXpyawR0D9obFnYJKzXcLxW9PCx5BZKon0G4AvU7CngVSoGn-ZDdt7rivineTh58ApT3Ljw_d6qog-km-IqMmeQjAWF-B8tL97v0ENhxvPPHg8KMZDaUqvBy0lHTsrT_J/s400/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="http://www.junioriqfar.co.cc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-BZcZscaumBi6YpgKGYxBk1hQayNaZegdvGRZdoi1EKYiF5HpHHBm1-9RxFH7aADLq2bORK0iqJOr5nfb7SYEDwxN16h18LRgcunIegpAdzWUBaISJVpq4F3SUW_ndFPbS-AEJRApL8Dn/s1600/rss.png" alt="rss" /><span>RSS</span></a> 
</div>
</div>
<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>
    Code di bawah ini adalah code untuk Menu berada di bawah 
    <div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Home</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMT6wDnrUQHQ3fxN01RHgBx8b2kWLaYFrRUbOP9-AWd8xsAUiumAl249eVPJbVoAYb_pM42u0EQAjRyfQVdmD7VqVb39G6HovpUVNEJqoSCNUBgvg621d4tCVz9DFstIKM_mgzQ8DtfYRa/s1600/home.png" alt="home" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Contact</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEeIlXR7k7ThyOgvyP9mJ6GfuVydp-OkwRlz_VVAhpubM18iJtG1BRYf9uuJU9d5oHLwhpDnrAW9b_uNrTtQ8J1V0YbWRroF7rt4EYxg0bTwwuNE77Q8iI1ROSCOdbsVaTOH6b2m3s6Gt/s1600/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Portfolio</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGi_yWxAnA43Ut9tQRm4vEOKEB-yuNsZAe89NHuVRIkyu0qG2GvZjezWhtyUNMpFsMucae3kyUdKSd-qqhYRTec3FXDxdQhSaaFBvgjHBP2KQEGw04_4_IpdphH2UCKubWZQchsEelB1c1/s1600/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Music</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkqyr3cOgyrBYRYhKe1FxIAcR612RagLyEbUqgMXOaq2ftEH9WLbBgeaoDhyphenhyphencNCZn2yP5opUnsdQ2oTJF2qVA_DiFclsG7IR-D_v_MNiNru019PmQJNhviDnfR502mvgGKXSzmldZ7D0c/s1600/music.png" alt="music" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Video</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPyqna6mfU4tnsHZUTn1qfUHIMXoWBMRQblbfE5utM8p8a2tkTCPkfW6Bs0Q0izRlyAkAGNhuyyaQIQwG_fOqFlsufWqev4qVSsQ6f_v7FRfIW93Zd8h6GX7gh8Y8n_GCQpJ5fenucupN/s1600/video.png" alt="video" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>History</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGv2ZaZMh3jlqaw2tMn7sEdEm-w1owDfjvSPVN3m_Muyf3tiTPf8AN6Ri22av8VS4GDLOp9aSTLZeQ7DOGU4D9BBE9SEHu9QfZED8HfUmCMm7jV_htBMohaDWByQDOxJTsGNJepdDRHWGh/s400/history.png" alt="history" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>Calendar</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzP4tTa7XoWNtXpyawR0D9obFnYJKzXcLxW9PCx5BZKon0G4AvU7CngVSoGn-ZDdt7rivineTh58ApT3Ljw_d6qog-km-IqMmeQjAWF-B8tL97v0ENhxvPPHg8KMZDaUqvBy0lHTsrT_J/s400/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="http://www.junioriqfar.co.cc"><span>RSS</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-BZcZscaumBi6YpgKGYxBk1hQayNaZegdvGRZdoi1EKYiF5HpHHBm1-9RxFH7aADLq2bORK0iqJOr5nfb7SYEDwxN16h18LRgcunIegpAdzWUBaISJVpq4F3SUW_ndFPbS-AEJRApL8Dn/s1600/rss.png" alt="rss" /></a> 
</div>
</div>
<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>
  13. Kemudian ganti http://www.junioriqfar.co.cc dengan link yang akan anda tuju
  14. Kemudian simpan
ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait


, ,

2 komentar:

Dhany Sharing mengatakan...

Tutorial yang bagus sob, tapi pas saya coba kok gak bisa ya, malahan di atas blog saya muncul kode html...

12 Februari 2011 pukul 09.20
Unknown mengatakan...

Bisa lihat screenshotnya mas?
saya coba berhasil kog

17 Februari 2011 pukul 23.10

Posting Komentar

Jangan Lupa komentar apabila terdapat penulisan kata, kalimat atau yang lainnya. Terima kasih telah berkunjung ke sini.