Cara Cepat Membuat Menu Navigasi pada Blog

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:

<body>

<b:section class='header' id='header' maxwidgets='1'>

<b:widget id='Header1' locked='true' title='Makhasin's Blog (Header)' type='Header'/>

</b:section>

------> di sini letak html <------

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:

<ul class='qmmc' id='qm0'>
<li><a class='qmparent' href='http://informasi2-pendidikan.blogspot.com'>HOME</a></li>
<li><a class='qmparent' href='http://informasi2-pendidikan.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://informasi2-pendidikan.blogspot.com'>INFORMASI</a>
<ul>
<li><a href='http://informasi2-pendidikan.blogspot.com/search/label/Pendidikan'>PENDIDIKAN</a></li>
<li><a href='http://informasi2-pendidikan.blogspot.com/saarch/label/Kesehatan'>KESEHATAN</a></li>
<li><a href='http://informasi2-pendidikan.blogspot.com/search/label/Agamis'>AGAMIS</a></li>
<li><a href='http://informasi2-pendidikan.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.

1 Response to "Cara Cepat Membuat Menu Navigasi pada Blog"

Anonymous21 October 2016 at 21:24
Assalamu Alaikum wr-wb, perkenalkan nama saya ibu Rosnida zainab asal Kalimantan Timur, saya ingin mempublikasikan KISAH KESUKSESAN saya menjadi seorang PNS. saya ingin berbagi kesuksesan keseluruh pegawai honorer di instansi pemerintahan manapun, saya mengabdikan diri sebagai guru disebuah desa terpencil, dan disini daerah tempat saya mengajar hanya dialiri listrik tenaga surya, saya melakukan ini demi kepentingan anak murid saya yang ingin menggapai cita-cita, Sudah 9 tahun saya jadi tenaga honor belum diangkat jadi PNS Bahkan saya sudah 4 kali mengikuti ujian, dan membayar 70 jt namun hailnya nol uang pun tidak kembali, bahkan saya sempat putus asah, pada suatu hari sekolah tempat saya mengajar mendapat tamu istimewa dari salah seorang pejabat tinggi dari kantor BKN pusat karena saya sendiri mendapat penghargaan pengawai honorer teladan, disinilah awal perkenalan saya dengan beliau, dan secara kebetulan beliau menitipkan nomor hp pribadinya dan 3 bln kemudian saya pun coba menghubungi beliau dan beliau menyuruh saya mengirim berkas saya melalui email, Satu minggu kemudian saya sudah ada panggilan ke jakarta untuk ujian, alhamdulillah berkat bantuan beliau saya pun bisa lulus dan SK saya akhirnya bisa keluar,dan saya sangat berterimah kasih ke pada beliau dan sudah mau membantu saya, itu adalah kisah nyata dari saya, jika anda ingin seperti saya, anda bisa Hubungi Bpk Drs Tauhid SH Msi No Hp 0853-1144-2258. siapa tau beliau masih bisa membantu anda, Wassalamu Alaikum Wr Wr ..