Cara membuat menu navigasi dropdown keren di blogspot - berlanjut dari artikel sebelumnya tentang membuat kerangka tamplate dari awal. Sekarang saatnya membuat menu navigasi dropdown keren.
Berikut contoh hasilnya
Pertama-tama copy kode CSS berikut ini. (blok dan tekan CTRL + C)
/* navigasi ala https://belajardesign86.blogspot.co.id/ */
#navigasi-bdgtg { background: transparent;width: 100%; height: 50px;font-weight: bold;border-top:3px solid red;}
#nav { margin: 0; padding: 0;float:left;font-family:Helvetica; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0 10px 0 10px; }
#nav li { list-style: none; margin: 0; padding: 0; }
#nav li a, #nav li a:link, #nav li a:visited { background: #063823; height: 30px; color: #fff; display: block; font-size: 20px; font-weight: bold; text-transform: uppercase; text-decoration: none; margin: 0 2px 2px 0; padding-left:13px;padding:10px;border-bottom-right-radius:15px; }
#nav li a:hover, #nav li a:active {background: red; color: #f6f986; margin:0 15px 0 0; text-decoration: none; }
#nav li li a, #nav li li a:link, #nav li li a:visited { background: #063823; color: #fff; float: none; margin: 0; padding: 7px 10px; }
#nav li li a:hover, #nav li li a:active { background: red; color: #f6f986; padding: 7px 10px;margin:5px; }
#nav li { float: left; padding: 0;}
#nav li ul { z-index: 100; position: absolute; left: -999em; height: auto; margin: 0; padding: 0; }
#nav li ul a { width: auto; }
#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; }
#nav li .beranda{background-color:red;}
#navigasi-bdgtg { background: transparent;width: 100%; height: 50px;font-weight: bold;border-top:3px solid red;}
#nav { margin: 0; padding: 0;float:left;font-family:Helvetica; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0 10px 0 10px; }
#nav li { list-style: none; margin: 0; padding: 0; }
#nav li a, #nav li a:link, #nav li a:visited { background: #063823; height: 30px; color: #fff; display: block; font-size: 20px; font-weight: bold; text-transform: uppercase; text-decoration: none; margin: 0 2px 2px 0; padding-left:13px;padding:10px;border-bottom-right-radius:15px; }
#nav li a:hover, #nav li a:active {background: red; color: #f6f986; margin:0 15px 0 0; text-decoration: none; }
#nav li li a, #nav li li a:link, #nav li li a:visited { background: #063823; color: #fff; float: none; margin: 0; padding: 7px 10px; }
#nav li li a:hover, #nav li li a:active { background: red; color: #f6f986; padding: 7px 10px;margin:5px; }
#nav li { float: left; padding: 0;}
#nav li ul { z-index: 100; position: absolute; left: -999em; height: auto; margin: 0; padding: 0; }
#nav li ul a { width: auto; }
#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; }
#nav li .beranda{background-color:red;}
Lalu paste kode diatas sebelum tag ]]</b:skin>.
Langkah kedua copy kode html berikut ini. (blok dan tekan CTRL + C)
<div id='navigasi-bdgtg'>
<ul id='nav'>
<li><a href='https://belajardesign86.blogspot.co.id/'> Home</a></li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/Belajar%20Desain%20Grafis'> Tentang Desain</a></li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/Tipografi'> Tipografi</a></li>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/Photoshop'> Photoshop </a>
<ul>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/Video Photoshop'> Video Tutorial</a></li>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/gambar tutorial'> Gambar Tutorial</a></li>
</ul>
</li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/desain%20web'> Desain web</a></li>
</ul>
</div
<ul id='nav'>
<li><a href='https://belajardesign86.blogspot.co.id/'> Home</a></li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/Belajar%20Desain%20Grafis'> Tentang Desain</a></li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/Tipografi'> Tipografi</a></li>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/Photoshop'> Photoshop </a>
<ul>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/Video Photoshop'> Video Tutorial</a></li>
<li><a href='https://carajadipintar2016.blogspot.co.id/search/label/gambar tutorial'> Gambar Tutorial</a></li>
</ul>
</li>
<li><a href='https://belajardesign86.blogspot.co.id/search/label/desain%20web'> Desain web</a></li>
</ul>
</div
dan pastekan setelah tag </header>.
Langkah ketiga ganti teks warna hijau dengan link pada blog anda, dan teks warna merah sesuai dengan kata yang ingin ditampilkan.
Sekian tutorialnya. Mudah bukan.
Jika masih ada error atau kurang paham silakan bertanya di kolom komentar atau kunjungi fanpage facebook kami.
Terima kasih, semoga bermanfaat.
No comments:
Post a Comment