Cara Menciptakan Sajian Navigasi Dropdown Keren Di Blogspot

Cara menciptakan hidangan navigasi dropdown keren di blogspot Cara menciptakan hidangan navigasi dropdown keren di blogspot



Cara menciptakan hidangan navigasi dropdown keren di blogspot – berlanjut dari artikel sebelumnya wacana menciptakan kerangka tamplate dari awal. Sekarang saatnya menciptakan hidangan navigasi dropdown keren. 

Berikut pola hasilnya

Pertama-tama copy aba-aba 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;}



Lalu paste aba-aba diatas sebelum tag ]]</b:skin>.

Langkah kedua copy aba-aba 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


dan pastekan sehabis 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. Praktis bukan. 
Jika masih ada error atau kurang paham silakan bertanya di kolom komentar atau kunjungi fanpage facebook kami.

Terima kasih, biar bermanfaat.

Related Posts