Tutorial cara membuat menu touch down Anonim11.13.00

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

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 { margin: 0; padding: 0; }
  #subnavbar ul { float: center; list-style: none; margin: 0; padding: 0; }
  #subnavbar li { list-style: none; margin: 0; padding: 0; }
  #subnavbar li a, #subnavbar li a:link, #subnavbar li a:visited { color: #0066CC; display: block; font-size: 24px; font-family: Fontdiner swanky, Arial, Tahoma, Verdana; font-weight: bold; text-transform: uppercase; margin: 0; padding: 4px 10px 4px; }
  #subnavbar li a:hover, #subnavbar li a:active { background: #222222; color: #FFF; margin: 0; padding: 4px 10px 4px; text-decoration: none; }
  #subnavbar li li a, #subnavbar li li a:link, #subnavbar li li a:visited { background: #222222; color: #FFF; font-size: 14px; font-family: Fontdiner swanky, verdana,sans-serif; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 4px 10px; border: 1px solid #ddd; }
  #subnavbar li li a:hover, #subnavbar li li a:active { background: #222222; color: #FFF; padding: 4px 10px; }
  #touch li { float: center; padding: 0; }
  #touch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin:0; padding: 0; }
  #touch li ul a {}
  #touch li ul ul { margin: 0;}
  #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; }

• Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'>
  

• <div id="subnavbar">
  <div style="position: fixed; top: 20px; left: 35%;">
  <ul id="touch">
  <li><a href="http://akbarfakhrurroji.blogspot.com/"><img src="http://3.bp.blogspot.com/-Y6UgtgHButw/T4UHQ0qZgQI/AAAAAAAAALU/Cfv-9NGDuEQ/s1600/images.jpg" />Home</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.comlink-menu-1/">Page</a>
  <ul>
  <li><a href="http://akbarfakhrurroji.blogspot.com/p/html-5.html">HTML 5</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/p/belajar-html-5">Belajar HTML 5
  </a></li></ul></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/link-menu-2">Topik</a>
  <ul>
  <li><a href="http://akbarfakhrurroji.blogspot.com/search/label/Komputer">Komputer</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/search/label/Teknologi%20Informasi%20dan%20Komunikasi">Teknologi</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/search/label/Internet">Internet</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/search/label/Blog">Blog</a></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/search/label/Windows">Windows</a></li>
  </ul></li>
  <li><a href="http://akbarfakhrurroji.blogspot.com/">Link Teman</a>
  <ul>
  <li><a href="http://bank-donk.blogspot.com/">Pa Indra
  </a></li>
  <li><a href="http://wisnu-nurc.blogspot.com/">Wisnu Nur C
  </a></li>
  <li><a href="http://briano-conner.blogspot.com/">Imam Fitroh
  </a></li>
  <li><a href="http://jtwcity.blogspot.com/">Septiawan K
  </a></li>
  </ul></li></ul>
  </div>
  </div>

• Terakhir SAVE TEMPLATE

Keterangan:

Ganti Link dan nama-nama yang tertera diatas menjadi link dan nama yang anda kehendaki


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

Incoming Search Terms

Blog, subdown