Posted by Aak
Aak-share.com Updated at: 4:54:00 PM

Membuat Menu Navigasi Transparan

No comments:
Cara Membuat Menu Navigasi Transparan hanya dengan menggunakan properti CSS, menu navigasi transparan dimaksudkan maka benda atau warna di balik navigasi akan terlihat dengan jelas seperti warna pada backgrund Template. Warna navigasi akan terlihat menyerupai dengan warna pada background.



Jika ka Anda tertarik ingin memasangnya pada Blog, berikut ini langkah mudahnya :

1. Login keakun Blogger
2. Pilih template, lalu klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian Anda salin kode di bawah ini dan pasangkan diatasnya atau sebelumnya.

nav {
  max-width: 960px; /*image
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 75px 0;
}
nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  padding: 20px;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 25px;
  text-decoration: none;
  display: block;
}
nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

5. Selanjutnya Anda cari kode <div class="content-wrapper"> lalu copy kode dibawah ini dan pastekan di atasnya . Apabila kode tidak Ada pada Template Anda, Anda cari kode yang hampir menyerupai karena kode pada setiap Template biasanyan berbeda.

<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>

6. Simpan Tempate


Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments