Menu Navigasi pada blog diperlukan guna mempermudah dan mempercepat pencarian berbagai informasi di blog tersebut. Oleh karena itu keberadaannya sangat penting. Banyak designer template blog yang sudah melengkapi blog dengan menu navigasi. Tetapi jika Anda menggunakan template bawaan blogger biasanya blog belum dilengkapi dengan menu seperti ini. Tetapi Anda jangan khawatir karena untuk membuat menu tidak terlalu sulit. Jika blog anda belum ada menunya dan berminat untuk membuatnya saya akan berbagi cara membuat menu navigasi.
Pada kesempatan ini saya uraikan cara memasang menu navigasai yang disediakan oleh mycssmenu. Cara ini termasuk mudah dan anda bisa memilih berbagai bentuk dengan bebas plus gratiss.Langkah-langkahnya:
1. Pergi ke situs penyedia menu : http://mycssmenu.com
2. Anda langsung disodori berbagai bentuk menu navigasi, silahkan pilih satu aja.
Anda bisa lihat dulu dengan cara klik demo, jika cocok klik customiz di sebelah
3. Anda bisa membuat pengaturan warna pada design
4. Jika pengaturan warna selesai silahkan klik CSS, lalu copy kodenya dan simpan dulu di notepad. Kemudian klik html, copy dan simpan lagi kodenya di notepad.
5. Memasang di Blog. Masuklah ke blogger, klik Rancangan ---> Edit html.
Pasanglah kode CSS di atas kode ]]></b:skin>
6. Selanjutnya ambil kode html yang sudah anda simpan tadi dan pasang di bawah kode:
7. Terakhir klik simpan.
Untuk lebih memudahkan Anda, saya beri contoh kode css dan html yang saya gunakan di blog ini.
Inilah kode CSS nya:
*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}
#qm0 {
background-color:#000;
border-color:#FFD42A;
border-left:2px 0px;
border-style:solid;
}
#qm0 a {
padding:5px 5px 5px 5px;
background-color:transparent;
color:#FFFF2A;
font-family:monospace;
font-size:12px;
text-decoration:none;
border-style:solid;
border-color:#08AA13;
}
#qm0 a:hover {
text-decoration:blink;
color:#ffffff;
background-color:#A51721;
border-style:solid;
border-color:#ffffff;
-moz-border-radius:10px;
}
body #qm0 .qmactive, body #qm0 .qmactive:hover {
text-decoration:underline;
}
#qm0 div, #qm0 ul {
padding:0px 0px 0px 0px;
margin:0px;
background-color:transparent;
border-style:outset;
border-color:#ffffff;
border-width:2px;
}
#qm0 div a, #qm0 ul a {
padding:8px 40px 8px 5px;
background-color:#D0EDBA;
color:#000000;
border-color:#ffffff;
border-width:2px;
border-style:solid;
}
#qm0 div a:hover, #qm0 ul a:hover {
text-decoration:blink;
background-color:#A51721;
color:#ffffff;
border-color:#D0EDBA;
border-width:2px;
border-style:solid;
}
body #qm0 div .qmactive, body #qm0 div .qmactive:hover {
background-color:#D0EDBA;
color:#333333;
text-decoration:;
}
]]></b:skin>
dan inilah kode html nya:
<li><a class='qmparent' href='http://sinma68.blogspot.com'>HOME</a></li>
<li><a class='qmparent' href='http://sinma68.blogspot.com/p/profil.html'>PROFIL</a></li>
<li><a class='qmparent' href='http://sinma68.blogspot.com/p/kontak-saya.html'>KONTAK</a></li>
<li><a class='qmparent' href='http://sinma68.blogspot.com'>INFORMASI</a>
<ul>
<li><a href='http://sinma68.blogspot.com/search/label/Pendidikan'>PENDIDIKAN</a></li>
<li><a href='http://sinma68.blogspot.com/saarch/label/Kesehatan'>KESEHATAN</a></li>
<li><a href='http://sinma68.blogspot.com/search/label/Agamis'>AGAMIS</a></li>
<li><a href='http://sinma68.blogspot.com/search/label/Finansial'>FINANSIAL</a></li>
</ul></li>
<li class='qmclear'/></ul>
Jika Anda memasang kode seperti pada contoh di atas anda tinggal ganti url nya aja sesuaikan dengan url/link blog anda.
Selamat mencoba semoga berhasil pasang menu.
6 Comments:
informasi ini yang saya cari..
terimaksih ya..
ini yg di cari2, ijinnya untuk di coba di blog saya gan. thanks
kebingungan ni...gmn olahnya y?
biar lau di klik langsung muncul url kita gmn?
@viber: lau Anda copy contoh yg sy buat di atas, ganti aja url yg warna merah dengan url blog anda, thanks.
Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.
sip banget nii infonya
Post a Comment