Dalam artikel sebelumnya tentang 10 Kesalahan SEO, ada satu hal yang membuat penulis terpanggil untuk memberikan solusi salah satunya. Apa itu ?? Yakni developer website biasanya melakukan kesalahan membuat popup menu dengan java script, hal ini cukup fatal, biasanya googlebot ataupun crawler yang lain enggan melewatinya.
Oke lalu bagaimana membuat googlebot maupun crawler lainnya mengindex page melalui popup menu? Yakni dengan mengubah popup menu dari yang tadinya menggunakan javascript menjadi menggunakan css saja. Menggunakan css untuk membuat popup menu jauh lebih ringan, dan tentunya jauh lebih disukai oleh googlebot maupun crawler yang lainnya. Hasilnya adalah index page jauh lebih maksimal.
Luar biasa bukan? Sungguh. :-)
Sederhananya membuat popup akan segera kita bahas segera.
Ya persiapkan satu file saja, misakan popup.html
di bagian body, isinya kurang lebih seperti ini :
<body>
<div id=”menu”>
<ul>
<li><a href=”">Home</a></li>
<li>?? ?
<a href=”">News</a>
<ul>
<li><a href=”">Website</a></li>
<li><a href=”">Mobile</a></li>
<li><a href=”">Android</a></li>
</ul>
</li>
<li><a href=”">About Us</a></li>
<li><a href=”">Contact Us</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Portfolio</a></li>
</ul>
</div>
</body>
Sedangkan style di bagian headnya kira-kira seperti ini
<style type=”text/css”>
#menu{
width:auto;
height:30px;
padding:8px 0 0px 0;
background:#0057C7;
}
#menu ul{
margin:0;
}
#menu ul li{
list-style-type:none;
margin:0;
float:left;
}
#menu ul li a{
font-family:Arial;
text-decoration:none;
margin:0 10px 0 0;
font-size:12px;
color:#fff;
}
#menu ul li ul.child{
display:none;
}
#menu ul li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}
#menu ul li:hover ul.child li a{
display:block;
padding:10px 20px 10px 20px;
background:#0057C7;
margin:0 0 0 -20px;
}
#menu ul li:hover ul.child li{
float:none;
margin:0 0 0 -30px;
}
#menu ul li a:hover{
text-decoration:underline;
}
</style>
Yang terjadi sebetulnya kita membuat popup menu memanfaatkan unordered list <ul>. Dimana di dalamnya terdapat kelas parent dan child seperti ini :
Dan yang membuat mereka menjadi terlihat popup adalah
Ketika kondisi normal, atau dengan kata lain li anak parent tidak di hover. Maka yang terjadi adalah ul.childnya disembunyikan.
#menu ul.parent li ul.child{
display:none;
}
dan ketika li anak parent di hover maka ul.childnya di tampilkan.
#menu ul.parent li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}
dan hasilnya adalah seperti ini.
http://labz.ilmuwebsite.com/popupmenu/index.html
Mudah sekali bukan? Ya begitulah cara membuat popup menu dengan menggunakan css saja. Selamat mencoba.
Salam.
Cara Membuat Website dengan Adobe DreamweaverIngin tau lebih jelas, lebih cerdas, tentang cara pembuatan website? Store Ilmuwebsite menyediakan CD Tutorial Interaktif dengan harga murah, mengantar Anda menjadi seorang web designer yang handal
Mahir PHP MySQL Membuat Aplikasi Dinamis Berbasis WebIngin tau lebih jelas, lebih cerdas, tentang cara pembuatan website dinamis atau aplikasi berbasis web? Kami punya solusi yang sangat sangat murah! Lebih ampuh dari hanya sekedar membaca buku, interaktif layaknya kursus PHP biasa
Keren tutorial nya… makasih om tutorial popup menu nya..
wah. hebat.. tapi tak coba ada yg kurang nu mang sengaja apa ya ? hehe..
tapi keren.. saya ko ga penah kepikiran ya..
Sip deh.. css emang oke… hhe..
btw pengen jadi patnernya ilmuwebsite deh..
mas, klo menggunakan wordpress gimana? bingung neh…. ga tau cara editnya.
baru belajar bikin blog, saya udah ketemu yang membingungkan sekali. pusing mas ya, ternyata ga gampang seperti yang dibilang org. thx
mas ada yg kurang child tu yg di bawah News, yg tadinya aja, di ubah jadi
thanks mas bro tutorialsx :D