Buat Menu (Navigasi) Sub Menu Mendatar Di Blog keren habizzz….

Buat Menu (Navigasi) Sub Menu Mendatar Di Blog keren habizzz….

Begini cara gampang buat menubar mendatar di Blogspot. Keren Habis.

Menu atau navigasi horizontal menggunakan kode script html dan css yang nantinya kode css ini sendiri  kita terapkan kedalam template blog dan kode html,  kita simpan di dalam widget blog…..

 

screenshot menu dropdown

kode script html dan css menu dropdown
<style type="text/css"> .mn-dn { background:#3797ab; height:30px; list-style-type:none; margin:0px; padding:0px; } .mn-dn li { border-right:1px solid #ffffff; float:left; height:30px; } .mn-dn li a { color:#ffffff; display:block; font:100% arial, georgia, sans-serif; font-weight:bold; padding:7px 17px; text-decoration:none; } .mn-dn li:hover { background:#3979aa; position:relative; } .mn-dn li:hover a { text-decoration:none; } .mn-dn li:hover ul { background-color:#f0ff0f; left:0px; padding:0px; top:30px; width:142px; } .mn-dn li:hover ul li { border:none; height:22px; } .mn-dn li:hover ul li a { background:#f0ff0f; border:1px solid #eeeeee; color:#000000; display:block; font-size:80%; height:18px; line-height:18px; padding:0px; text-decoration:none; text-indent:5px; width:140px; padding:3px; } .mn-dn li:hover ul li a:hover { background:#eeeeee; border:1px solid #444444; color:#000000; height:18px; padding:3px; } .mn-dn ul { left:-9999px; list-style-type:none; position:absolute; top:-9999px; } </style> <ul class="mn-dn"> <li><a href="#menu1">menu 1</a> <ul> <li><a href="#submenu1">sub menu 1</a></li> <li><a href="#submenu2">sub menu 2</a></li> <li><a href="#submenu3">sub menu 3</a></li> <li><a href="#submenu4">sub menu 4</a></li> </ul> </li> <li><a href="#menu2">menu 2</a> <ul> <li><a href="#submenu21">sub menu 21</a></li> <li><a href="#submenu22">sub menu 22</a></li> <li><a href="#submenu23">sub menu 23</a></li> <li><a href="#submenu24">sub menu 24</a></li> </ul> </li> <li><a href="#menu3">menu 3</a> <ul> <li><a href="#submenu31">sub menu 31</a></li> <li><a href="#submenu32">sub menu 32</a></li> <li><a href="#submenu33">sub menu 33</a></li> <li><a href="#submenu34">sub menu 34</a></li> </ul> </li> <li><a href="#menu4">menu 4</a> <ul> <li><a href="#submenu41">sub menu 41</a></li> <li><a href="#submenu42">sub menu 42</a></li> <li><a href="#submenu43">sub menu 43</a></li> <li><a href="#submenu44">sub menu 44</a></li> </ul> </li> <li><a href="#menu5">menu 5</a> <ul> <li><a href="#submenu51">sub menu 51</a></li> <li><a href="#submenu52">sub menu 52</a></li> <li><a href="#submenu53">sub menu 53</a></li> <li><a href="#submenu54">sub menu 54</a></li> </ul> </li> </ul>

Lagkah Pertama

• Masuk blogger/web kamu.
• Kemudian tab kiri => pilih menu template => terus klik edit html.
• Pada edit html cari kode ]]></b:skin> setelah kodenya ketemu copy dan pastekan kode css berikut tepat diatas kode ]]></b:skin>.

<style type="text/css">
.mn-dn {
background:#3797ab;
height:30px;
list-style-type:none;
margin:0px;
padding:0px;
}
.mn-dn li {
border-right:1px solid #ffffff;
float:left;
height:30px;
}
.mn-dn li a {
color:#ffffff;
display:block;
font:100% arial, georgia, sans-serif;
font-weight:bold;
padding:7px 17px;
text-decoration:none;
}
.mn-dn li:hover {
background:#3979aa;
position:relative;
}
.mn-dn li:hover a {
text-decoration:none;
}
.mn-dn li:hover ul {
background-color:#f0ff0f;
left:0px;
padding:0px;
top:30px;
width:142px;
}
.mn-dn li:hover ul li {
border:none;
height:22px;
}
.mn-dn li:hover ul li a {
background:#f0ff0f;
border:1px solid #eeeeee;
color:#000000;
display:block;
font-size:80%;
height:18px;
line-height:18px;
padding:0px;
text-decoration:none;
text-indent:5px;
width:140px;
padding:3px;
}
.mn-dn li:hover ul li a:hover {
background:#eeeeee;
border:1px solid #444444;
color:#000000;
height:18px;
padding:3px;
}
.mn-dn ul {
left:-9999px;
list-style-type:none;
position:absolute;
top:-9999px;
}
</style>

Kemudian => klik simpan (save).
Setelah  langkah pertama beres lanjut pada langkah kedua.

• Nah sekarang pada tab kiri => kamu pilih menu tata letak => tambahkan gadget => pilih html/javascript => setelah itu copy dan pastekan kode html berikut dalam kotak html/javascript => dan untuk kotak judulnya kosongkan saja =>《kemudian klik simpan.

<ul class="mn-dn">
<li><a href="#menu1">menu 1</a>
<ul>
<li><a href="#submenu1">sub menu 1</a></li>
<li><a href="#submenu2">sub menu 2</a></li>
<li><a href="#submenu3">sub menu 3</a></li>
<li><a href="#submenu4">sub menu 4</a></li>
</ul>
</li>
<li><a href="#menu2">menu 2</a>
<ul>
<li><a href="#submenu21">sub menu 21</a></li>
<li><a href="#submenu22">sub menu 22</a></li>
<li><a href="#submenu23">sub menu 23</a></li>
<li><a href="#submenu24">sub menu 24</a></li>
</ul>
</li>
<li><a href="#menu3">menu 3</a>
<ul>
<li><a href="#submenu31">sub menu 31</a></li>
<li><a href="#submenu32">sub menu 32</a></li>
<li><a href="#submenu33">sub menu 33</a></li>
<li><a href="#submenu34">sub menu 34</a></li>
</ul>
</li>
<li><a href="#menu4">menu 4</a>
<ul>
<li><a href="#submenu41">sub menu 41</a></li>
<li><a href="#submenu42">sub menu 42</a></li>
<li><a href="#submenu43">sub menu 43</a></li>
<li><a href="#submenu44">sub menu 44</a></li>
</ul>
</li>
<li><a href="#menu5">menu 5</a>
<ul>
<li><a href="#submenu51">sub menu 51</a></li>
<li><a href="#submenu52">sub menu 52</a></li>
<li><a href="#submenu53">sub menu 53</a></li>
<li><a href="#submenu54">sub menu 54</a></li>
</ul>
</li>
</ul>

Ganti semua #submenu1 sampai #submenu54 dengan url tujuan menu dropdown kamu dan ganti juga semua menu 1 sampai menu 5 dan sub menu 11 sampai sub menu 54 sesuai denga nama menu dari url tujuan menu dropdown Ente. Untuk merubah warna, tinggi, lebar dan beberapa lainnya bisa kamu otak atik sendiri pada kode css diatas. Semoga ada Manfaatnya . TerimaKasih..