Cara Membuat Nav Tabs Pada Postingan Blog - kode html

Membuat nav tabs pada paotingan blogspot dengan kode html sangat mudah. Anda perlu memahami cara membuatnya. Jika sudah mempelajarinya dan belu paham juga, maka copy paste saja kode html yang sudah dipersiapkan pada postingan ini.

Pengertian Nav Tabs

Nav tabs adalah komponen antarmuka web berupa menu navigasi berbentuk tab horisontal atau vertikal yang dipakai untuk membagi konten. Pada Blogspot (Blogger), penerapan nav tab umumnya terbagi menjadi dua fungsi yang berbeda: sebagai menu navigasi utama blog (di bawah header) atau sebagai pembagi konten di dalam satu postingan.

Fungsinya hampir sama dengan Accordion. Terdapat beberapa gaya nav tabs yang dapat anda terapkan.

Kali ini, akan membagikan informasi tentang cara membuat nav tab pada postingan blogger dengan beberapa variasi tampilan yang berbeda.

Beberapa Gaya Nav Tabs

1. Nav tabs horisontal
2. Nav tabs vertikal
3. Nav tabs + icon

Nav Tabs Horisontal

Berikut tampilan nav tabs dengan bentuk horisontal;

Untuk membuat nav tabs seperti contoh di atas silahkan menggunakan code berikut

<div class="nav-tabs">
  <ul class="nav-tabs-label">
    <li>
      Deskripsi
    </li>
    <li>
      Pengiriman
    </li>
    <li>
      Harga
    </li>
  </ul>
  <ul class="nav-tabs-content">
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
      <p>Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>
    </li>
    <li>
      <p>Aenean nulla quam, consequat et est in, vulputate tempus tellus. Phasellus ultricies purus vitae fringilla sollicitudin. In nec placerat sem. Cras non tempor eros. Pellentesque malesuada cursus enim a tincidunt. Duis sodales metus ut maximus egestas.</p>
    </li>
    <li>
      <p>Nunc eu nisl a augue fermentum blandit id aliquam erat. Sed quis dictum magna. Maecenas eu arcu eu quam porta venenatis at eu odio. Morbi eu justo gravida, venenatis magna eu, gravida quam. Sed tristique nisi nisl, nec lacinia mauris fringilla sed. Nam at ultricies urna, eu consectetur lacus. Ut sed felis pretium, fringilla ex quis, vulputate nunc. Nam sit amet varius neque, congue consectetur lorem. Suspendisse sit amet efficitur lorem. Vestibulum fermentum tempor leo, quis convallis dui congue nec.</p>
    </li>
  </ul>
</div>

Nav Tabs Vertikal

Untuk membuat nav tabs horisontal Anda perlu copy paste kode berikut ini

<div class="nav-tabs vertical">
 <ul class="nav-tabs-label">
    <li>
      Deskripsi
    </li>
    <li>
      Pengiriman
    </li>
    <li>
      Harga
    </li>
  </ul>
  <ul class="nav-tabs-content">
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
      <p>Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>
    </li>
    <li>
      <p>Aenean nulla quam, consequat et est in, vulputate tempus tellus. Phasellus ultricies purus vitae fringilla sollicitudin. In nec placerat sem. Cras non tempor eros. Pellentesque malesuada cursus enim a tincidunt. Duis sodales metus ut maximus egestas.</p>
    </li>
    <li>
      <p>Nunc eu nisl a augue fermentum blandit id aliquam erat. Sed quis dictum magna. Maecenas eu arcu eu quam porta venenatis at eu odio. Morbi eu justo gravida, venenatis magna eu, gravida quam. Sed tristique nisi nisl, nec lacinia mauris fringilla sed. Nam at ultricies urna, eu consectetur lacus. Ut sed felis pretium, fringilla ex quis, vulputate nunc. Nam sit amet varius neque, congue consectetur lorem. Suspendisse sit amet efficitur lorem. Vestibulum fermentum tempor leo, quis convallis dui congue nec.</p>
    </li>
  </ul>
</div>

Hasilnya;

Nav Tabs + icon

Yaitu nav tabs yang ditambah dengan icon

Contoh

Untuk membuat nav tabs seperti contoh, gunakan code ini;

<div class="nav-tabs">
  <ul class="nav-tabs-label">
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
      Deskripsi
    </li>
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
      Pengiriman
    </li>
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
      Harga
    </li>
  </ul>
  <ul class="nav-tabs-content">
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis nisl feugiat nisl aliquam, ac imperdiet ante condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ex urna, interdum nec fermentum vitae, dictum nec odio.</p>
      <p>Nunc lobortis, turpis sed fringilla condimentum, orci est sodales ipsum, et bibendum diam nulla nec lectus. Nullam a est massa. Pellentesque maximus commodo mollis. Phasellus viverra ullamcorper elit, vitae vehicula nisi iaculis at. Etiam efficitur porta pellentesque. Integer dictum leo porta nisi malesuada, at tempus est luctus.</p>
    </li>
    <li>
      <p>Aenean nulla quam, consequat et est in, vulputate tempus tellus. Phasellus ultricies purus vitae fringilla sollicitudin. In nec placerat sem. Cras non tempor eros. Pellentesque malesuada cursus enim a tincidunt. Duis sodales metus ut maximus egestas.</p>
    </li>
    <li>
      <p>Nunc eu nisl a augue fermentum blandit id aliquam erat. Sed quis dictum magna. Maecenas eu arcu eu quam porta venenatis at eu odio. Morbi eu justo gravida, venenatis magna eu, gravida quam. Sed tristique nisi nisl, nec lacinia mauris fringilla sed. Nam at ultricies urna, eu consectetur lacus. Ut sed felis pretium, fringilla ex quis, vulputate nunc. Nam sit amet varius neque, congue consectetur lorem. Suspendisse sit amet efficitur lorem. Vestibulum fermentum tempor leo, quis convallis dui congue nec.</p>
    </li>
  </ul>
</div>

Silahkan coba dan gunakan tiga gaya nav tabs tersebut, agar cara membuat nav tabs di postingan blog ini bermanfaat.