Panduan

Daftar Isi

Coding HTML Fundamentals

Pada halaman ini kita akan belajar beberapa contoh kode HTML dasar yang bisa digunakan untuk membuat tampilan Olshop menjadi lebih lengkap. Materi ini berisi contoh kode menu navigasi, icon media sosial, jasa kirim, pembayaran, popup box, posting produk dan halaman statis.

Catatan: Untuk memasang kode, buka halaman atau postingan, lalu pilih Tampilan HTML, kemudian paste kode yang ingin digunakan.

1. Coding Menu Navigasi

Menu navigasi digunakan untuk menampilkan link utama pada Olshop seperti Home, Produk, Testimoni, Pembayaran dan Kontak.

HTML Menu Navigasi

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/p/produk.html">Produk</a></li>
    <li><a href="/p/testimoni.html">Testimoni</a></li>
    <li><a href="/p/pembayaran.html">Pembayaran</a></li>
    <li><a href="/p/kontak.html">Kontak</a></li>
  </ul>
</nav>

2. Coding Icon Media Sosial

Icon media sosial digunakan untuk menghubungkan Olshop dengan akun Facebook, Instagram, TikTok, YouTube dan WhatsApp.

HTML Icon Media Sosial

<div>
  <a href="https://facebook.com/" target="_blank">Facebook</a>
  <a href="https://instagram.com/" target="_blank">Instagram</a>
  <a href="https://tiktok.com/" target="_blank">TikTok</a>
  <a href="https://youtube.com/" target="_blank">YouTube</a>
  <a href="https://wa.me/6281234567890" target="_blank">WhatsApp</a>
</div>

3. Coding Jasa Kirim

Bagian jasa kirim digunakan untuk menampilkan pilihan ekspedisi yang tersedia pada Olshop.

HTML Jasa Kirim

<div>
  <h3>Jasa Kirim Tersedia</h3>

  <ul>
    <li>JNE</li>
    <li>J&T Express</li>
    <li>SiCepat</li>
    <li>Pos Indonesia</li>
    <li>Anteraja</li>
  </ul>
</div>

4. Coding Pembayaran

Bagian pembayaran digunakan untuk menampilkan metode pembayaran yang tersedia di Olshop, seperti transfer bank, e-wallet dan COD.

HTML Pembayaran

<div>
  <h3>Metode Pembayaran</h3>

  <h4>Transfer Bank</h4>
  <p>BCA, BRI, Mandiri, BNI</p>

  <h4>E-Wallet</h4>
  <p>DANA, OVO, GoPay, ShopeePay</p>

  <h4>COD</h4>
  <p>Bayar di tempat jika tersedia.</p>
</div>

5. Coding Konten Popup Box

Popup box digunakan untuk menampilkan informasi tambahan seperti promo, pemberitahuan atau ajakan menghubungi admin Olshop.

HTML Popup Box

<details>
  <summary>Lihat Promo</summary>

  <h3>Promo Spesial</h3>
  <p>Dapatkan diskon khusus untuk pembelian hari ini.</p>
  <a href="https://wa.me/6285264928597" target="_blank">Hubungi WhatsApp</a>
</details>

6. Coding Posting Produk

Posting produk digunakan untuk menampilkan gambar produk, nama produk, harga, deskripsi dan tombol beli melalui WhatsApp.

HTML Posting Produk

<div>
  <img src="https://via.placeholder.com/700x400" alt="Nama Produk">

  <h2>Nama Produk</h2>
  <p><strong>Harga: Rp150.000</strong></p>

  <p>
    Produk ini memiliki kualitas terbaik dan cocok digunakan
    untuk kebutuhan sehari-hari.
  </p>

  <a href="https://wa.me/6285264928597?text=Saya%20mau%20pesan%20produk" target="_blank">
    Beli Sekarang
  </a>
</div>

7. Coding Halaman Statis

Halaman statis digunakan untuk membuat halaman tetap seperti Tentang Kami, Kontak, Profil Usaha atau Kebijakan Privasi pada Olshop.

HTML Halaman Statis

<div>
  <h1>Tentang Kami</h1>

  <p>
    Selamat datang di Olshop kami. Kami menyediakan berbagai produk
    berkualitas dengan harga terjangkau.
  </p>

  <h2>Visi Kami</h2>
  <p>
    Menjadi Olshop terpercaya dan memberikan pelayanan terbaik
    kepada pelanggan.
  </p>

  <h2>Misi Kami</h2>
  <ul>
    <li>Menyediakan produk berkualitas.</li>
    <li>Memberikan pelayanan yang ramah.</li>
    <li>Mengirim pesanan dengan cepat dan aman.</li>
  </ul>

  <h2>Kontak Kami</h2>
  <p>
    WhatsApp: 0852-6492-8597<br>
    Email: support@lkpeeckomputer.my.id<br>
    Alamat: Jalan Terubuk No.8
  </p>
</div>

Tips: Jika ingin mengganti nomor WhatsApp, ubah angka 6281111111111 dengan nomor Anda. Contoh nomor Anda 085264928597 akan menjadi 6285264928597.