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 Toko Kang Gunawan

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(400px, 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;
            margin-bottom: 0;
            font-size: 0.8rem;
            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;
        }
        
        .keterangan {
            text-align: center;
            padding:20px;
        }
        
        /* Footer Styles */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 15px 0;
            background-color: #fff;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        
        footer a {
            text-decoration: none;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
        }
        
        footer a i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        footer a.center-icon {
            background-color: #007bff;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -50px; /* Naikkan icon tengah */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        footer a.center-icon i {
            font-size: 24px;
            margin-bottom: 0;
        }
        
        footer a span {
            font-size: 12px;
        }

        /* Media Query untuk tampilan mobile */
        @media screen and (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        .btn,.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg)}.btn,.btn-link{--bs-btn-font-weight:400}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-line-height:1.5;--bs-btn-color:#212529;--bs-btn-bg:transparent;--bs-btn-border-width:1px;--bs-btn-border-color:transparent;--bs-btn-border-radius:0.375rem;--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn-primary,.btn-secondary,.btn-success{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info,.btn-warning{--bs-btn-color:#000;--bs-btn-hover-color:#000;--bs-btn-active-color:#000;--bs-btn-disabled-color:#000}.btn-info{--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger,.btn-dark{--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125)}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary,.btn-outline-secondary{--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-bg:transparent;--bs-gradient:none;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info,.btn-outline-warning{--bs-btn-hover-color:#000;--bs-btn-active-color:#000;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-bg:transparent;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:none;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:0.5rem}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:0.25rem}
    </style>
</head>
<body>
    <div style="position:fixed; text-align:center;margin-top:-30px;margin-bottom:100px;width:100%;clear:float;background:#fff;">
    <div class="title" style="margin-bottom:0px">
        <img src="../g_assets/images/logo.png" alt="Toko Online Kang Gunawan">
    </div>
    <hr></div>
    <div class="title content" style="margin-bottom:5px; font-size:20px;"><b>PRODUK BARU</b></div>
        <div class="container" style="margin-top:50px;">
            
        <div class="item">
            <a href="../yung-kien-i-ganoderma-powder"><img src="../uploads/prd1_688f10ae36460_yki.jpg" alt="Yung Kien I Ganoderma Powder" /></a>
            <div class="keterangan">
                <h3>Yung Kien I Ganoderma Powder</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 1.518.750,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 1.215.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../yung-kien-b-ganoderma-powder"><img src="../uploads/prd1_688f0f02bd070_ykb.jpg" alt="Yung Kien B Ganoderma Powder" /></a>
            <div class="keterangan">
                <h3>Yung Kien B Ganoderma Powder</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 2.476.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 2.055.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../jia-hor-seasoning"><img src="../uploads/1_688b7c4ca63b3_jiahor-seasoning.jpg" alt="Jia Hor Seasoning" /></a>
            <div class="keterangan">
                <h3>Jia Hor Seasoning</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 254.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 204.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-hair-care-series-berbahan-alami"><img src="../uploads/prd1_6889e26413723_vk-hair-care-series.jpeg" alt="VK Hair Care Series Berbahan Alami" /></a>
            <div class="keterangan">
                <h3>VK Hair Care Series Berbahan Alami</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 488.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 398.750,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../aquasense-hydrating-lifting-cream"><img src="../uploads/prd1_68889ae422321_lifthing cream.jpg" alt="AquaSense Hydrating & Lifting Cream" /></a>
            <div class="keterangan">
                <h3>AquaSense Hydrating & Lifting Cream</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 1.145.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 946.250,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-body-lotion"><img src="../uploads/prd1_6888989f6988c_vklotion.jpg" alt="VK Body Lotion" /></a>
            <div class="keterangan">
                <h3>VK Body Lotion</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 272.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 218.750,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-shower-gel"><img src="../uploads/prd1_6888974466463_vkshowergel.jpg" alt="VK Shower Gel" /></a>
            <div class="keterangan">
                <h3>VK Shower Gel</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 196.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 155.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-foaming-dew"><img src="../uploads/prd1_6889d4d096919_vk-foaming-dew.jpeg" alt="VK Foaming Dew" /></a>
            <div class="keterangan">
                <h3>VK Foaming Dew</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 160.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 125.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-hair-repairing-serum"><img src="../uploads/prd1_68889324883e8_vkserum.jpg" alt="VK Hair Repairing Serum" /></a>
            <div class="keterangan">
                <h3>VK Hair Repairing Serum</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 182.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 143.750,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-scalpcare-shampoo"><img src="../uploads/prd1_688891a9e4e10_vkscalpcare.jpg" alt="VK Scalpcare Shampoo" /></a>
            <div class="keterangan">
                <h3>VK Scalpcare Shampoo</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 172.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 135.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vk-daily-shampoo"><img src="../uploads/prd1_6888908e2b0f7_vk-daily-shampoo.jpg" alt="VK Daily Shampoo" /></a>
            <div class="keterangan">
                <h3>VK Daily Shampoo</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 154.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 120.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../paket-2-kopi-sh-juwara-cafe-dan-1-odol-greenzhi"><img src="../uploads/1_687dca5053576_paket-2-kopi-sh-juwara-cafe-dan-1-odol-greenzhi.jpg" alt="Paket 2 Kopi SH JUWARA CAFE dan 1 Odol GREENZHI" /></a>
            <div class="keterangan">
                <h3>Paket 2 Kopi SH JUWARA CAFE dan 1 Odol GREENZHI</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 600.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 475.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../vking-minuman-alami-bernutrisi-tinggi-hidrolisat-kolagen"><img src="../uploads/prd1_688f11be0a1f4_v-king-shuang-hor.jpg" alt="V-King Minuman Alami Bernutrisi Tinggi Hidrolisat Kolagen" /></a>
            <div class="keterangan">
                <h3>V-King Minuman Alami Bernutrisi Tinggi Hidrolisat Kolagen</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 1.462.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 1.210.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../goeco-liquid-detergent"><img src="../uploads/prd1_6875d5cb3b42f_GoEco-Liquid-Detergent.jpg" alt="GoEco Liquid Detergent" /></a>
            <div class="keterangan">
                <h3>GoEco Liquid Detergent</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 290.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 233.750,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../goeco-apc-all-purpose-cleaner-pembersih-serbaguna-ramah-lingkungan"><img src="../uploads/prd1_6875cd03b0d99_go-eco-all-purpose-shuanghor.jpg" alt="GoEco APC All Purpose Cleaner Pembersih Serbaguna Ramah Lingkungan" /></a>
            <div class="keterangan">
                <h3>GoEco APC All Purpose Cleaner Pembersih Serbaguna Ramah Lingkungan</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 128.500,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 98.750,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../kopi-sh-juwara-cafe-4-in-1-dan-3-in-1"><img src="../uploads/prd1_6875c589018ec_kopi_sehat_juwara_cafe.jpg" alt="Kopi SH JUWARA CAFE 4 in 1 dan 3 in 1" /></a>
            <div class="keterangan">
                <h3>Kopi SH JUWARA CAFE 4 in 1 dan 3 in 1</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 500.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 400.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../pasta-gigi-greenzhi-toothgel"><img src="../uploads/prd1_6875fb5fe63f4_greenzhi-toothgel-shuang-hor.jpg" alt="Pasta Gigi Greenzhi Toothgel" /></a>
            <div class="keterangan">
                <h3>Pasta Gigi Greenzhi Toothgel</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 100.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 75.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../kopi-sh-juwara-cafe-3-in-1"><img src="../uploads/prd1_6875c70fe9b07_kopi-sh-juwara-cafe-3-in-1.jpg" alt="Kopi SH JUWARA CAFE 3 in 1" /></a>
            <div class="keterangan">
                <h3>Kopi SH JUWARA CAFE 3 in 1</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 250.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 200.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
                
        <div class="item">
            <a href="../kopi-sh-juwara-cafe-4-in-1"><img src="../uploads/prd1_6875f854961dd_kopi-sh-juwara-cafe-4-in-1-manis.jpg" alt="Kopi SH JUWARA CAFE 4 in 1" /></a>
            <div class="keterangan">
                <h3>Kopi SH JUWARA CAFE 4 in 1</h3>
                <div style='color:red;font-size:12px;font-style:italic;'></div>                                <span style="text-decoration:line-through; color:red; font-size:12px;">
                Rp. 250.000,-<br>                </span>
                
                <b style="color:blue; font-size:14px;">Rp. 200.000,-</b>
                
                                </a>
                
            </div>
        </div>
        
            </div> <div class="title content" style="margin-bottom:5px; font-size:20px;"><b>SEMUA PRODUK</b></div>
        <!--PRODUK-->                            
        <div class="row" id="load_data"></div>
		<div class="text-center" id="load_data_message"></div>
		
        <!-- Tambahkan lebih banyak item di sini sesuai kebutuhan -->
    </div>
    <footer>
        <a href="https://www.kanggunawan.com/"><i class="fas fa-home"></i><span>Beranda</span></a>
        <a href="https://www.kanggunawan.com/produk"><i class="fas fa-shopping-bag"></i><span>Etalase</span></a>
        <a href="https://www.kanggunawan.com/jasa" class="center-icon"><i class="fas fa-plus"></i></a>
        <a href="https://www.kanggunawan.com/ngopi"><i class="fas fa-mug-hot"></i><span>Ngopi</span></a>
        <a href="https://www.kanggunawan.com/cuan"><i class="fa fa-wallet"></i><span>Cuan</span></a>
    </footer>
    <script src="../g_templates/simple/web/js/jquery-3.2.1.min.js"></script>
    <script src="../g_assets/js/toko_load_produk.js"></script>
    <!-- Histats.com  START  (aync)-->
        <script type="43fba1eb1e5beeea84cf6dc0-text/javascript">var _Hasync= _Hasync|| [];
        _Hasync.push(['Histats.start', '1,4861248,4,0,0,0,00010000']);
        _Hasync.push(['Histats.fasi', '1']);
        _Hasync.push(['Histats.track_hits', '']);
        (function() {
        var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
        hs.src = ('//s10.histats.com/js15_as.js');
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
        })();</script>
        <noscript><a href="/" target="_blank"><img  src="//sstatic1.histats.com/0.gif?4861248&101" alt="" border="0"></a></noscript>
        <!-- Histats.com  END  -->
</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 Toko Kang Gunawan

Mau Codingnya?

Posting Komentar untuk "Membuat Toko Online Itu Sangat Mudah"

Posting Komentar

Widget HTML #3
