Assalamualaikum
Sobat,
Naaah Cara Membuat Menubar Dengan Sub Menu dibawahnya sudah ane utak atik
akhirnya bisa dengan lancar (maklum Newbie), banyak bloger yang sudah pada
paham, nah saatnya ane yang baru paham juga berbagi buat bloger yang belum
paham.
Langkah selanjutnya :
1. Buka & Login di blog sobat.
2. Masuk ke Rancangan trus ke Edit HTML (jangan lupa centang/ceklist
Expand Template Widget)
3. Tekan F3 atau Ctrl+F, setelah keluar kolom pencari script HTML masukkan
script seperti ini ]]><b:skin>
4. Setelah ketemu script tersebut, Copy Script dibawah ini :
----------------------------------------------------------------------------------------------------------
#NavbarMenu {
width: 1000;
height: 40px;
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvn1k6k9VfjpN5BF8D_XhVY5oRTkFlkQYA6BhMTVZu26U-0TT3cmjBaWc61CAqhnJ7CC7mkVlSGjK1ea4n92D-Hmr6YeGFh4s3RFsChmQfSDbKlrgq24H8aJ3Pse_vg7RlNuQhk1hEjfV/s1600/bg4.jpg)
repeat-x top;
color: # 7f6000
margin: 0 auto 0;
padding: 0;
font: bold 12px Verdana, Verdana, Verdana;
border-top: 1px solid # 93c47d;
border-bottom: 1px solid # 93c47d;
}
#NavbarMenuleft {
width: 1000;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #1f1fd2;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Century Gothic, Century Gothic, Century Gothic;
}
#nav li a:hover, #nav li a:active {
background:#f1c232;
color: #5252f0;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXTUftai_i3oZaO7_LnAHmSrVXWeQkv_HPQXJykCZhIpyhpRfJgO7xUMMLoyLNXiIu8UUHeyk513cwS-0WZNm52UkwSQxN0tUFyx9R2yXlvuxsYwEe29Uy1VsFlZLZ1TMn1SyrEn8YDA5j/s800/navbar.gif)
repeat-x top;
width: 150px;
color: #000;
text-transform: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 11px Verdana, Verdana, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
----------------------------------------------------------------------------------------------------------
5. Setelah script di copy, pastekan tepat diatas code ]]><b:skin> selesai tahap ke.1.
6. Setelah itu cari script ini </b:section>
7.
Jika sudah ketemu, Copy script dibawah ini dulu
----------------------------------------------------------------------------------------------------------
</div><div
id='NavbarMenu'>
<div
id='NavbarMenuleft'>
<ul
id='nav'>
<li><a
expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a
href=http://mimlimababat.blogspot.com'>Profil</a>
</li>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Sejarah</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Visi dan Misi</a></li>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Guru dan Karyawan</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Kepala Madrasah</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Guru dan Karyawan</a></li>
</ul>
</li>
<li><a>Data Siswa</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 1</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 2</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 3</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 4</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 5</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kelas 6</a></li>
</ul>
</li>
<li><a>Kurikulum</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Struktur
Kurikulum</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Kalender
Pendidikan</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Nilai Siswa</a></li>
</ul>
</li>
<li><a>Ekstrakurikuler</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Hizbul Wathan</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Drum Band</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Teater</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Study Club</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Seni</a></li>
</ul>
</li>
<li><a>Bahan Ajar</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>Qur`an Hadits</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Aqidah Akhlak</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Fiqih</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>S K I</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>PKn</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Bahasa Indonesia</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Bahasa Arab</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Matematika</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>I P A</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>I P S</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Seni Budaya</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Pendidikan
Jasmanai</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Bahasa Jawa</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Bahasa Inggris</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>K M D</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Teknikom</a></li>
</ul>
</li>
<li><a
href=http://mimlimababat.blogspot.com'>Artikel</a>
</li>
</ul>
</li>
<li><a>Download</a>
<ul>
<li><a
href='http://mimlimababat.blogspot.com'>RPP</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Pemetaan SKKD</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Pemetaan KKM</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Analisis Soal
Ulangan</a></li>
<li><a
href='http://mimlimababat.blogspot.com'>Administrasi Guru</a></li>
</div>
</div> <!-- end navbar -->
-------------------------------------------------------------------------------------------------------------------------
8. Paste kan tepat dibawah code </b:section>
9. Ganti tulisan berwana merah dengan nama blog sobat dan ganti
warna biru dengan nama menu yang sobat inginkan.
10. Klik Pratinjau, jika berhasil klik simpan template widget.
Selesai tahap 2.
11. Jangan Lupa Klik G+ atau follow untuk jadi Sahabat dan ane
akan backlink sobat segera.
12. Semoga Bermanfaat.^_^
