Tutorial membuat menu Touch down
Tutorial cara membuat menu touch down, Lama sudah awak tidak meng-update blogtegal ini dan awak hanya men-sortir komentar-komentar dan dari sekian cukup banyak komentar ada yang bertanya: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 akses lewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba bolehlah, silahkan ikuti tutorial berikut.
- 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: #bb0000; display: block; font-size: 16px; font-family: 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: 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'>
<ul id='touch'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.blogtegal.com/link-menu-1'>Menu-1</a>
<ul>
<li><a href='http://www.blogtegal.com/link-submmenu-1.a'>Submenu-1.a</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-1.b'>Submenu-1.b</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-1.c'>Submenu-1.c</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-1.d'>Submenu-1.d</a></li>
</ul></li>
<li><a href='http://www.blogtegal.com/link-menu-2'>Menu-2</a>
<ul>
<li><a href='http://www.blogtegal.com/link-submmenu-2.a'>Submenu-2.a</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-2.b'>Submenu-2.b</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-2.c'>Submenu-2.c</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-2.d'>Submenu-2.d</a></li>
</ul></li>
<li><a href='http://www.blogtegal.com/link-menu -3'>Menu-3</a>
<ul>
<li><a href='http://www.blogtegal.com/link-submmenu-3.a'>Submenu-3.a</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-3.b'>Submenu-3.b</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-3.c'>Submenu-3.c</a></li>
<li><a href='http://www.blogtegal.com/link-submmenu-3.d'>Submenu-3.d</a></li>
</ul></li>
</ul></div>- Terakhir SAVE TEMPLATE
- Untuk teks yang berwarna ungu merupakan alamat link, sesuaikan dg punyamu.
- Untuk teks yang berwarna hijau akan di jadikan sebagai daftar menu yg akan di tampilkan.
- Untuk teks yang berwarna biru yang akan di jadikan sebagai daftar sub menu /menu touch down.
Seting Domain di co.cc
Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:
Ada 3 tipe pengaturan di co.cc. Ketiganya memiliki fungsi tersendiri. berikut ini penjelasanya:
1. Managed DNS
Ini biasanya digunakan untuk sebuah web yang memerlukan web hosting dan mengharuskan untuk mengarahkan Name Server-nya ke hosting tersebut. Misal untuk membuat web di 000webhost, atau bisa juga untuk blog wordpress yg menggunakan hosting dari luar. Metode ini tidak cocok digunakan untuk blogger/blogspot yang menggunakan hosting default dari blogger/blogspot.
Cara setting untuk metode ini yaitu dengan mengisi pada kolom "Name Server 1 dan Name Server 2 dengan name server yg sesuai dengan hosting yang digunakan. Misal, bagi yang menggunakan hosting dari 000webhost maka untuk kolom "Name Server 1" disi dengan "ns01.000webhost.com" dan kolom "Name Server 2" disi dengan "ns02.000webhost.com". Kemudian klik tombol "Setup". Selesai
2. Zone Records
Zone records cocok digunakan bagi para pengguna blogger/blogspot. berikut ini cara setting untuk Zone Records
- Pada kolom "Host" isikan dengan nama domain yg sudah km daftarkan, misal "www.namadomain.co.cc" (jangan lupa dikasih "www")
- Untuk option "TTL" biarkan saja, gak perlu dirubah2
- Pada option "Type" pilih yang "CNAME"
- Untuk kolom "Value" isikan "ghs.google.com" Sehingga akan seperti pada gamabr dibawah ini:
Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:
- Login ke blogger/blogspot kemudian masuk ke menu "Setting-->Publishing"
- Kemudian pilih "Switch to: • Custom Domain
- Setelah itu klik pada "Already own a domain? Switch to advanced settings"
- Kemudian isikan nama domain kamu yang baru pada kolom "Your Domain".
- Selanjutnya klik tombol "Save Setting"
Selesai. Kalau berhasil (Settingnya sudah benar) maka domain kamu yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog kamu akan tetap bisa diakses dengan melalui domain yang lama.
3. URL Forwarding
URL forwarding bisa digunakan untuk apa aja, bisa web ato blog. Tapi URL Forwarding ini hanya memforward domain yg baru (yang di co.cc) ke domain lama. Jadi domain lama akan 100% seperti semula tanpa ada perubahan apapun, cuma kita bisa mengakses web/blog kita dengan mengetikkan nama domain baru kita di browser. Jika menggunakan URL Forwarding maka yang terindex di google atau Search engine yang lain adalah tetap Domain kita yang lama.
Untuk setting URL Forwarding sangat mudah, kita hanya mengisikan data-data yang diminta dan disesuaikan dengan web/blog kita, seperti "Redirect to:, Page Title, URL Hiding, Meta Description dan Meta Keywords". Kita tidak perlu lagi mensetting domain di web/blog kita lagi.
Note: Metode ini tidak dianjurkan jika tidak terpaksa
Jadi kesimpulannya adalah:
- Jika kamu memakai layanan blogger/blogspot maka gunakanlah "Zone Records"
- Jika domainnya digunakan untuk web yg memerlukan hosting atau untuk wordpress maka gunakanlah "Manage DNS"
- Jangan menggunakan "URL forwarding" jika tidak terpaksa. Misal untuk untuk blog dari multiply yang tidak support custom domain.
