Mungkin timbul pertanyaan, "Apa menu sentuh itu..??". Menu sentuh diartikan sebagai deretan menu yang apabila disorot oleh mouse, menu yang 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.
Demo : Lihat disini
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: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", 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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
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, "Lucida Grande", "Trebuchet MS", 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 merah :
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.
-
http://epg-studio.blogspot.commerupakan link yang akan terbuka pada tab baru, jika pengunjung mengklik link tersebut. Ganti dengan link yang anda inginkan. Menu 1, menu 2, menu 3, menu 4 dan menu 5merupakan judul dari seetiap menu yang tampil. Ganti dengan judul menu yang ingin anda tampilkan.isi dengan kode HTML/JavaScript yang ingin anda tampilkanmerupakan 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.- 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> - Setelah selesai pengeditan tampilan menu sentuh, klik tombol Simpan.
- Lihat Blog anda.
-
No comments:
Post a Comment
Silahkan anda komentar degan baik dan bijak