Tutorial membuat menu Touch Down

Bagaimana cara membuat sub menu seperti yang ada di blog ini dan ini.

Mungkin yang di maksud adalah menu Touch Down (mendarat), sesuai dengan namanya 'mendarat' yakni menu ini akan bekerja ketika pointer mouse melintas diatas link tersebut. Yang menampilkan daftar-daftar link yang lain ke bawah.
Tutorial ini kelanjutan dari cara membuat sub menu link yang erat kaitannya dg tutorial ini, karena menu touch down biasanya di letakan pada sub menu. Manfaat menu touch down ini yakni untuk menghemat ruang pada blog, sama halnya menu multi kolom yang di ciptakan untuk menghemat ruang pada blog, namun sayang menu touch down dan menu multi kolom hanya bekerja ketika di akses lewat komputer, jika di akseslewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba bolehlah, silahkan ikuti tutorial berikut. 0h iya untuk demo bisa di lihat disini  doroinc.blogspot.com 

• Pertama login ke dashboard blog kamu.
• Pilih Rancangan »» Edit HTML
• Backup template lengkap dulu dg mendownload template lengkap.
• Tandai kotak kecil pada  Expand Widget Template
• Kemudian tempatkan kode CSS berikut di atas kode ]]></b:skin>

• #SubNavbar{background:#bb0000; width:960px; height:32px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #touch{margin:0; padding:0;} #touch ul{float:left; list-style:none; margin:0; padding:0;} #touch li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #touch li a, #touch li a:link, #touch li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #touch li{float:left; padding:0;} #touch li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #touch li ul a{width:140px;} #touch li ul ul{margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul{left:-999em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul{left:auto;} #touch li:hover, #touch li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} ..topleft {width: 304px; float: left; margin: 0; padding:0;} ..topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} ..topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

• Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'> atau jika menu ini akan di tampilkan di atas konten seperti contoh demo yang di sebutkan di atas info.blogtegal.com maka kode HTML berikut di tempatkan tepat diatas <div id='content-wrapper'>

• <div id='outlet'>
  <div id='SubNavbar'>
  <div id='SubNavbarleft'>
  <ul id='touch'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>WebHosting »</a>
  <ul><li><a href='http://hostgator.blogtegal.com'>Hostgator</a></li>
  <li><a href='http://www.blogtegal.com/2012/03/cara-membeli-hosting-hostgator.html'>Cara Membeli</a></li>
  </ul></li>
  <li><a href='#'>Tutorial Blog »</a>
  <ul><li><a href='http://www.blogtegal.com/2011/05/tutorial-membuat-menu-touch-down.html'>Menu TouchDown</a></li>
  <li><a href='http://www.blogtegal.com/2011/04/membuat-link-otomatis-pada-blog.html'>Link otomatis</a></li>
  <li><a href='http://www.blogtegal.com/2011/04/membuat-link-label-secara-manual.html'>Label Manual</a></li>
  </ul></li>
  <li><a href='#'>Tutorial SEO »</a>
  <ul><li><a href='http://www.blogtegal.com/2010/11/trik-menjadikan-blog-seo-friendly.html'>Trik Blog SEO</a></li>
  <li><a href='http://www.blogtegal.com/2011/01/mengubah-gambar-menjadi-seo-friendly.html'>Gambar SEO</a></li>
  <li><a href='http://www.blogtegal.com/2011/01/membuat-meta-tag-seo-friendly.html'>Meta Tag SEO</a></li>
  </ul></li>
  <li><a href='#'>Profile »</a>
  <ul><li><a href='http://facebook.com/ora.kober'>My Facebook</a></li>
  <li><a href='http://twitter.com/blogtegal'>My Twitter</a></li>
  </ul></li></div>
  <div id='search'>
  <form action='/search/' id='searchform' method='get' style='display:inline;'>
  <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
  <input class='btn' type='submit' value='Search'/>
  </form>
  </div></div></div>

• Terakhir SAVE TEMPLATE

Keterangan: 

1. Untuk teks yang berwarna hijau merupakan judul menu anchor text yang tampil sebelum pointer mouse melintas.
2. Untuk teks yang berwarna ungu merupakan submenu / subnavbar anchor text yang akan tampil setelah pointer mouse melintas di atas menu.
3. Untuk teks yang berwarna orange merupakan kode mesin pencari, mau di terapkan atau tidak terserah ente hehe.

Silahkan berexperimen sendiri untuk tampilan dan bentuk warna bisa di sesuaikan seleramu. Selamat berpusing ria .

Tweet

Subscribe via Email