Banyak cara bagaimana membuat blog terlihat cantik dan salah satu caranya untuk membuat blog yang kita miliki terlihat cantik adalah dengan mendesai menu secara dinamis menggunakan menu drop down.
Menu drop down sendiri adalah menu yang menampilkan sederetan link yang dinamis kearah bawah adapun cara membuat menu drop down pada blogspot adalah dengan mengikuti langkah dibawah.
1. Masuk ke blogspot anda
2. Klik menu tata letak
3. Klik tambah gadget
Kemudian copy html di bawah
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='https://tiana-ti-poltektegal.blogspot.co.id'>Home</a>
</li>
<li>
<a href='https://tiana-ti-poltektegal.blogspot.co.id/2017/10/profile.html'>Profil</a>
</li>
<li>
<a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Mata Kuliah</a>
<ul>
<li>
<a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 1</a>
<ul>
<li><a href='https://tiana-ti-poltektegal.blogspot.co.id/2017/10/konsep-teknologi informasi.html'>Konsep TI</a></li>
<li><a href='#'>Logika informatika</a></li>
<li><a href='#'>Hardware</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/algoritma-struktur-data.html'>Algoritma 1</a></li>
<li><a href='#'>Aplikasi Perkantoran</a></li>
<li><a href='#'>B.Inggris</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/bindonesia.html'>B.Indonesia</a></li>
<li><a href='#'>Agama</a></li>
<li><a href='#'>Kalkulus</a></li>
</ul>
<li>
<a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 2</a>
<ul>
<li><a href='#'>Sistem Digital</a></li>
<li><a href='#'>Kewarganegaraan</a></li>
<li><a href='#'>Sistem Operasi 1</a></li>
<li><a href='#'>Algoritma 2</a></li>
<li><a href='#'>Analisa & Perancangan Sistem</a></li>
<li><a href='#'>B.Inggris 2</a></li>
<li><a href='#'>Organisasi & arsitektur Komputer</a></li>
<li><a href='#'>Kalkulus 2</a></li>
</ul>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 3</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 4</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 5</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 6</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 7</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/mata-kuliah.html'>Semester 8</a></li>
</li></li></ul>
<li>
<a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Tugas Mata Kuliah</a>
<ul>
<li><a href='https://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Konsep TI</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Logika informatika</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Hardware</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Algoritma </a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Aplikasi Perkantoran</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>B.Inggris</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>B.Indonesia</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Agama</a></li>
<li><a href='http://tiana-ti-poltektegal.blogspot.co.id/2017/10/kumpulan-tugas.html'>Kalkulus</a></li>
</ul>
</li>
<li>
<a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Drop Down</a></li>
</ul>
</li></li></ul></div>
4. Tanda # di hapus dan di masukkan link .Untuk link yang sudah saya tandai bisa di ganti sesuai link postingan anda, agar saat di klik nanti pindah ke halaman yang anda posting
5. Save
6. Untuk menambah menu horizontal anda dapat mengcopy kode yang berada di dalam <li> </li>
contoh:
<li>
<a href='#'>Nama Menu</a>
</li>
7. Untuk menambah menu vertikal copy kode dibawah
contoh
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li> 8. kemudian masuk ke menu template > edit HTML
9. Cari kode ']]></b:skin>' dan masukan kode dibawah tepat diatas kode ']]></b:skin>'
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 136px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Komentar
Posting Komentar