Membuat Toko Online Itu Sangat Mudah

04 April Posting Komentar

Agaknya judul artikel ini agak berlebihan, Ah tidak! Karena memang membuat toko online kini sangatlah mudah. Langsung saja silahkan cek laman toko online saya.

Laman yang berjudul Toko Online Kang Gunawan hanya terdiri dari 1 (satu) file .html saja. Ya benar, hanya terdiri dari 1 (satu) file .html saja, karena memang hanya terdiri dari satu file saja dan itu cukup untuk membuat sebuah laman layaknya toko online.

Tampilannya pun sudah menyesuaikan device yang digunakan, apabila di buka di desktop dan mobil akan berbeda dan langsung menyesuaikan. Biasanya istilahnya adalah web responsive.

Tampilan Desktop Toko Kang Gunawan

Apabila toko kang gunawan di buka menggunakan pc atau laptop maka akan muncul tampilan seperti gambar berikut:

Tampilan Mobile Toko Kang Gunawan

Apabila toko kang gunawan di buka menggunakan smartphone maka akan muncul tampilan seperti gambar berikut:

Seperti terlihat bahwa tampilannya akan menyesuaikan perangkat yang digunakan.

Mau Codingnya?

Baiklah, kalau teman-teman mau codenya, saya akan share di sini juga supaya bisa langsung di copas hihi 😄

Seperti disampaikan diatas, bahwa kode yang digunakan adalah kode HTML, bukan PHP, bukan LARAVEL, bukan REACT, bukan PYTON, bukan C++, apalagi ASSEMBLY tetapi kode HTML.

Tau kan HTML?

Baiklah tidak berlama-lama ini dia kode htmlnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Kang Gunawan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel='shortcut icon' href='https://www.kanggunawan.com/g_assets/images/128x128.png' />
    <meta name="description" content="Toko online kang gunawan, belanja jadi lebih mudah.">
    <meta name="author" content="Kang Gunawan">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
            justify-items: center;
        }
        .item {
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        .item img {
            max-width: 100%;
            height: auto;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .item .content {
            padding: 20px;
            text-align: center;
        }
        .item h3 {
            margin-top: 0;
            font-size: 1.2rem;
            color: #333;
        }
        .item p {
            margin-top: -10px;
            margin-bottom: 10px;
            color: #0040ff;
        }
        .item .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .item .button:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .item .button i {
            margin-right: 5px;
        }

        .title {
            text-align: center;
            margin-bottom: 30px;
            margin-top: 30px;
            color: #333;
        }
        .title h2 {
            font-size: 2rem;
            margin-top: 0;
        }

        /* Media Query untuk tampilan mobile */
        @media screen and (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="title">
        <h2>Toko Kang Gunawan</h2>
    </div>
    <div class="container">
        <div class="item">
            <img src="../uploads/produk/kopi-sayang.jpg" alt="Kopi Sayang">
            <div class="content">
                <h3>Kopi Sayang</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Kopi%20Sayang*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/jus-kangen.jpg" alt="Jus Kangen">
            <div class="content">
                <h3>Jus Kangen</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Jus%20Kangen*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/bio-shafa.jpg" alt="Bio Shafa">
            <div class="content">
                <h3>Bio Shafa</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Bio%20Shafa*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/choco-rindu.jpg" alt="Choco Rindu">
            <div class="content">
                <h3>Choco Rindu</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Choco%20Rindu*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/hubbi-milk.jpg" alt="Hubbi Milk">
            <div class="content">
                <h3>Hubbi Milk</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Hubbi%20Milk*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/jsa.jpg" alt="JSA Penghemat BBM">
            <div class="content">
                <h3>JSA</h3>
                <p>Rp. 150.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*JSA*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/carafit.jpg" alt="Carafit">
            <div class="content">
                <h3>Carafit</h3>
                <p>Rp. 600.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Carafit*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/kopi-sayang-paket.jpg" alt="Kopi Sayang">
            <div class="content">
                <h3>Kopi Sayang (Paket Brz)</h3>
                <p>Rp. 500.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Paket%20Bronze%20Kopi%20Sayang*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/paket_bronze_bio_shafa.jpeg" alt="Bio Shafa">
            <div class="content">
                <h3>Bio Shafa (Paket Brz)</h3>
                <p>Rp. 500.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Paket%20Bronze%20Bio%20Shafa*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <div class="item">
            <img src="../uploads/produk/paket-reseller-jks88.jpg" alt="Paket Reseller">
            <div class="content">
                <h3>Paket Reseller JKS88</h3>
                <p>Rp. 6.000.000</p>
                <a class="button" href="https://wa.me/6281809769589?text=Kang,%20Saya%20ingin%20pesan%20*Paket%20Reseller%20JKS88*" target="_blank">
                    <i class="fab fa-whatsapp"></i> Beli
                </a>
            </div>
        </div>
        <!-- Tambahkan lebih banyak item di sini sesuai kebutuhan -->
    </div>
</body>
</html>

Itulah kodenya, sangat sederhana bukan!

Silahkan kalau mau digunakan untuk membuat toko online kalian. Jangan lupa beri komentar yah!

KangGunawan.COM

Widget HTML #1

Membuat Toko Online Itu Sangat Mudah

Tampilan Desktop Toko Kang Gunawan

Tampilan Mobile Toko Kang Gunawan

Mau Codingnya?

Posting Komentar untuk "Membuat Toko Online Itu Sangat Mudah"

Posting Komentar

Widget HTML #3