Cari Artikel Blog Ini

Total Tayangan Laman

CARA MEMBUAT MENU SENTUH PADA SIDEBAR

Mungkin timbul pertanyaan, "Apa menu sentuh itu..??". Menu sentuh diartikan sebagai deretan menu yang apabila disorot oleh mouse, menuyang sebelumnya tersembunyi, akan terbuka secara otomatis.
Trik ini bertujuan untuk menghemat ruang pada sidebar, terutama pada blog yang ingin memiliki menu banyak.
Menu sentuh dapat diisi apa saja sesuai dengan apa yang ingin ditampilkan, misalnya : widget, koleksi gambar, kumpulan link sahabat, buku tamu atau apa saja yang penting kode yang dimasukkan, semuanya berupa kode HTML/JavaScript.

Ada beberapa langkah untuk membuat menu sentuh.

LANGKAH PERTAMA
  • Masuk ke Blogger.
  • Pilih Rancangan pada bagian Edit HTML.
  • Copy kode dibawah ini dan paste tepat diatas kode </head>


    <script src='http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>

    <script src='http://sites.google.com/site/epgstudiosite/javascript/ddaccordion.js' type='text/javascript'>

    </script>
    <script type='text/javascript'>
    ddaccordion.init({
    headerclass: &quot;silverheader&quot;, //Shared CSS class name of headers group
    contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group
    revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
    mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
    togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
    animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })
    </script>

    <style type='text/css'>
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*lebar menu*/
    border: 1px solid #9A9A9A;
    }
    .applemenu div.silverheader a{
    background: black url(http://sites.google.com/site/epgstudiosite/image/silvergradient.png) repeat-x center left;
    font: normal 12px Tahoma, &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative;
    width: auto;
    padding: 5px 0;
    padding-left: 8px;
    text-decoration: none;
    }
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url(http://sites.google.com/site/epgstudiosite/image/silvergradientover.png);
    color: white;
    }
    .applemenu div.submenu{
    background: white;
    padding: 5px;
    height: 300px;
    }
    </style>

  • Perhatikan huruf warna kuning :width: 170px; merupakan ukuran lebar menu, silahkan anda ganti sesuai lebar sidebar yang anda gunakan.
  • border: 1px solid #9A9A9A; merupakan ukuran dan warna garis, anda ganti dengan yang diinginkan.
  • height: 300px; merupakan ukuran tinggi dari menu yang tampil setelah disorot mouse, ubah ukurannya sesuai keperluan.
  • Huruf warna merah lainnya merupakan file JavaScript dan image pemanis simpanan EPG Studio. Anda dapat mengganti dengan kepunyaan anda sendiri.
  • Setelah selesai pengeditan, klik tombol Simpan Template.


LANGKAH KEDUA

  • Sekarang masuk ke Elemen Halaman.
  • Pilih pada sidebar yang mana anda ingin menampilkan menu sentuh.
  • Klik Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Copy kode dibawah ini dan paste pada kolom yang tersedia.


    <div class="applemenu">
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 1</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan <br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com" target="_blank">Menu 2</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 3</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 4</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 5</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    </div>

  • Perhatikan yang berwarna merah.
    1. http://epg-studio.blogspot.com merupakan link yang akan terbuka pada tab baru, jika pengunjung mengklik link tersebut. Ganti dengan link yang anda inginkan.
    2. Menu 1, menu 2, menu 3, menu 4 dan menu 5 merupakan judul dari seetiap menu yang tampil. Ganti dengan judul menu yang ingin anda tampilkan.
    3. isi dengan kode HTML/JavaScript yang ingin anda tampilkan merupakan tempat anda memasukan kode HTML/JavaScript yang akan tampil saat judul menu disorot mouse. Silahkan anda isi dengan kode HTML?Java Script yang ingin anda tampilkan, misalnya Buku Tamu, widget alexa, kumpulan banner sahabat, dll.
    4. Jumlah menu yang ditampilkan pada kode diatas sejumlah 5 menu. Jika anda ingin menambah dengan menu lainnya, tinggal menambahkan kode seperti di bawah ini :

      <div class="silverheader"><a href="http://epg-studio.blogspot.com" target="_blank">Menu selanjutnya</a></div>
      <div class="submenu">
      isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
      </div>

    5. Setelah selesai pengeditan tampilan menu sentuh, klik tombol Simpan.
    6. Lihat Blog anda.

Sumber : Dinamicdrive

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
12 Comments

12 komentar :

ok-bro mengatakan...

Good info and nice blog bro

tipshare mengatakan...

boleh juga infonya tar mau dicoba.
mampir juga ya www.tipsh4re.co.cc

Ivan Jaya mengatakan...

Mantap bang, tapi saya ada pertanyaan, ketika menu pertama dibuka bisa ditutup kembali ketika kita buka menu kedua, dst.. Tapi bagaimana menutup menu yang terakhir??

Ades mengatakan...

@Ivan Jaya Penampilan menu sentuh selalu terbuka satu buah menu. Jadi menu yang sudah terbuka tidak bisa ditutup, kecuali dengan membuka menu sentuh lainnya

Ivan Jaya mengatakan...

Bang, tutorial membuat kolom komentar udah ada belum yah..?

Saya lihat kolom komentarnya keren, ada nomornya di sudut kanan atas, trus balasan komentar untuk admin warna backgroundnya beda sendiri.

1 lagi bang, saya lihat di beberapa blog, di postingannya pada bagian atas atau bawah ada keterangan jumlah yang sudah berkomentar. Bisa diedit gak tuh jadi bentuk yang lebih menarik dan lucu.

Semoga tetap eksis bang. Tutorialnya banyak membantu.

poleko mengatakan...

yang ini bagus banget....
terimakasih atas infonya yah????

Ihsan blablabla mengatakan...

cara menambahkan tutorial dalam menu nya gimana bg ?

Ades mengatakan...

@Ihsan blablabla : Saya liat di blog anda menu sentuhnya dah berfungsi dengan baik, tinggal memasukan kode HTML kedalam menu sentuh.

pianfian mengatakan...

dapat pencerahan makasih mas bro

Huzna Souvenir mengatakan...

berhasil juga ternyata saya terapkan, 3 hari mencari2 tutorial seperti ini sekarang baru ketemu, thanks dah mau berbagi kepada newbie ini......

Fandi Adhitya mengatakan...

mantab gan,,nice info thanks for share

Iqbal Komputindo mengatakan...

Mantabbbbbbbbbbbbbbbbb Abizzzzzzzzzzzzz

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!