Themplate blogspot toko online GRATIS

template Blogspot untuk jualan online yang dilengkapi dengan fitur menu order dan cek ongkir. Itu ide yang sangat bagus!

Untuk mencapai tujuan ini, kita akan membuat sebuah template dasar yang menggunakan HTML, CSS, dan sedikit JavaScript. Kode ini akan mencakup:

Tampilan produk
Formulir order sederhana
Fungsionalitas dasar untuk cek ongkir (walaupun untuk fitur ini, kita perlu menggunakan API eksternal yang akan saya jelaskan nanti).

Penting untuk diketahui bahwa Blogspot sendiri tidak memiliki fitur e-commerce bawaan yang canggih. Oleh karena itu, kita akan menggunakan trik dan kode khusus untuk membuat fungsionalitas ini.

Berikut adalah langkah-langkah yang akan kita lakukan:

Membuat struktur dasar HTML untuk tampilan toko online.
Menambahkan CSS untuk mempercantik tampilan.
Menambahkan form order dengan JavaScript.
Menambahkan fitur cek ongkir dengan API pihak ketiga.

Kode Template Blogspot

Berikut adalah kode lengkap yang bisa kamu gunakan. Kamu bisa menyalin dan menempelkan kode ini langsung ke editor template Blogspot-mu.

Langkah 1: Salin Kode ke Editor Tema Blogspot

Masuk ke dasbor Blogspot.
Pilih menu Tema.
Klik tombol Sesuaikan lalu pilih Edit HTML.
Hapus semua kode yang ada di sana, lalu salin dan tempelkan kode di bawah ini.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Toko Online Saya</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .header {
            background-color: #333;
            color: #fff;
            padding: 1rem;
            text-align: center;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            padding: 20px;
        }

        .product-card {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        .product-card img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: auto;
        }

        .product-card h2 {
            font-size: 1.5rem;
            margin: 10px 0;
        }

        .product-card p.price {
            font-size: 1.2rem;
            color: #e67e22;
            font-weight: bold;
        }

        .btn {
            display: inline-block;
            background: #3498db;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 10px;
            cursor: pointer;
        }

        .btn:hover {
            background: #2980b9;
        }

        /* --- Style untuk Pop-up Order Form --- */
        .modal {
            display: none; /* Sembunyikan secara default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
            position: relative;
        }

        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        input[type="text"], input[type="email"], textarea {
            width: 95%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /* --- Style untuk Cek Ongkir Form --- */
        .shipping-section {
            background: #fff;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .shipping-section h3 {
            margin-top: 0;
        }

        .shipping-result {
            margin-top: 10px;
            font-weight: bold;
            color: #27ae60;
        }
    </style>
</head>
<body>

    <div class="header">
        <h1>Nama Toko Saya</h1>
        <p>Jual Beli Online Mudah dan Cepat!</p>
    </div>

    <div class="container">
        <div class="product-card">
            <img src="https://via.placeholder.com/300" alt="Nama Produk 1">
            <h2>Nama Produk 1</h2>
            <p>Deskripsi singkat tentang produk ini. Berkualitas tinggi dan sangat nyaman.</p>
            <p class="price">Rp 150.000</p>
            <button class="btn" onclick="openOrderModal('Nama Produk 1')">Pesan Sekarang</button>
        </div>

        <div class="product-card">
            <img src="https://via.placeholder.com/300" alt="Nama Produk 2">
            <h2>Nama Produk 2</h2>
            <p>Deskripsi singkat tentang produk kedua. Cocok untuk semua kalangan.</p>
            <p class="price">Rp 200.000</p>
            <button class="btn" onclick="openOrderModal('Nama Produk 2')">Pesan Sekarang</button>
        </div>

        <div class="shipping-section">
            <h3>Cek Ongkos Kirim</h3>
            <p>Masukkan kota tujuan untuk mengetahui perkiraan biaya kirim.</p>
            <label for="city">Kota Tujuan:</label>
            <input type="text" id="city" name="city" placeholder="Contoh: Jakarta">
            <button class="btn" onclick="checkShipping()">Cek Ongkir</button>
            <div id="shippingResult" class="shipping-result"></div>
        </div>
    </div>

    <div id="orderModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeOrderModal()">&times;</span>
            <h2>Formulir Pemesanan</h2>
            <form id="orderForm">
                <input type="hidden" id="productName" name="productName">
                
                <label for="customerName">Nama Lengkap:</label>
                <input type="text" id="customerName" name="customerName" required>

                <label for="customerAddress">Alamat Lengkap:</label>
                <textarea id="customerAddress" name="customerAddress" required></textarea>

                <label for="customerPhone">Nomor Telepon:</label>
                <input type="text" id="customerPhone" name="customerPhone" required>

                <p>Silakan klik tombol "Pesan via WhatsApp" untuk melanjutkan pesanan Anda.</p>
                <button type="button" class="btn" onclick="sendOrder()">Pesan via WhatsApp</button>
            </form>
        </div>
    </div>

    <script>
        // Fungsi untuk membuka pop-up form order
        function openOrderModal(product) {
            document.getElementById('productName').value = product;
            document.getElementById('orderModal').style.display = 'block';
        }

        // Fungsi untuk menutup pop-up form order
        function closeOrderModal() {
            document.getElementById('orderModal').style.display = 'none';
        }

        // Fungsi untuk mengirim pesanan via WhatsApp
        function sendOrder() {
            const productName = document.getElementById('productName').value;
            const customerName = document.getElementById('customerName').value;
            const customerAddress = document.getElementById('customerAddress').value;
            const customerPhone = document.getElementById('customerPhone').value;

            // Memastikan semua field terisi
            if (!customerName || !customerAddress || !customerPhone) {
                alert('Mohon lengkapi semua data!');
                return;
            }

            // Pesan yang akan dikirim
            const message = `Halo, saya ingin memesan produk berikut:%0A%0A* Produk: ${productName}%0A* Nama: ${customerName}%0A* Alamat: ${customerAddress}%0A* Telepon: ${customerPhone}%0A%0AMohon konfirmasi pesanan saya. Terima kasih!`;
            
            // Ganti "628123456789" dengan nomor WhatsApp-mu
            const whatsappNumber = "628123456789"; 
            const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${message}`;

            window.open(whatsappUrl, '_blank');
        }

        // Fungsi untuk Cek Ongkir
        // CATATAN: Fitur ini SANGAT SEDERHANA. Untuk fungsionalitas nyata,
        // kamu butuh API dari RajaOngkir, TIKI, JNE, dsb.
        function checkShipping() {
            const city = document.getElementById('city').value.toLowerCase();
            let shippingCost = 0;
            let message = '';

            // Ini adalah contoh data statis. Kamu bisa menggantinya.
            if (city.includes('jakarta')) {
                shippingCost = 15000;
                message = `Perkiraan ongkir ke ${city} adalah Rp ${shippingCost.toLocaleString('id-ID')}.`;
            } else if (city.includes('bandung')) {
                shippingCost = 20000;
                message = `Perkiraan ongkir ke ${city} adalah Rp ${shippingCost.toLocaleString('id-ID')}.`;
            } else {
                message = "Ongkir tidak ditemukan. Silakan hubungi kami untuk informasi lebih lanjut.";
            }

            document.getElementById('shippingResult').innerText = message;
        }

    </script>
</body>
</html>

Penjelasan dan Cara Penerapan Kode

HTML (

<body>

)

Header: Bagian paling atas untuk judul toko. Kamu bisa ganti Nama Toko Saya sesuai keinginan.
Product Card: Setiap produk menggunakan elemen div dengan kelas product-card. Kamu bisa gandakan blok ini untuk menambahkan produk baru.
- Gambar Produk: Ganti https://via.placeholder.com/300 dengan URL gambar produkmu.
- Nama Produk: Ganti Nama Produk 1 dan Rp 150.000 dengan detail produkmu.
- Tombol "Pesan Sekarang": Tombol ini akan memanggil fungsi openOrderModal() yang akan menampilkan formulir pesanan.
Shipping Section: Bagian untuk fitur cek ongkir.
Modal: Ini adalah elemen div yang berfungsi sebagai pop-up. Secara default, elemen ini tidak terlihat (display: none). Saat tombol "Pesan Sekarang" diklik, JavaScript akan membuatnya muncul.

CSS (

<style>

)

Kode CSS ini berfungsi untuk mengatur tampilan dari seluruh elemen HTML. Mulai dari warna latar belakang, tata letak produk, hingga tampilan pop-up order. Kamu bisa mengubah nilai-nilai seperti warna atau ukuran font di sini untuk menyesuaikan tampilan.

JavaScript (

<script>

)

openOrderModal(product): Fungsi ini akan menampilkan pop-up form. Ia juga akan mengisi nama produk secara otomatis ke dalam form.
closeOrderModal(): Fungsi ini akan menyembunyikan pop-up.
sendOrder(): Fungsi ini adalah inti dari form order. Ia akan mengambil data dari form (Nama, Alamat, Telepon), lalu menyusunnya menjadi sebuah pesan yang akan dikirim melalui WhatsApp.
- Penting! Ganti 628123456789 dengan nomor WhatsApp-mu sendiri agar pesanan masuk ke nomor yang benar.
checkShipping(): Ini adalah fungsi untuk cek ongkir. Saat ini, fungsi ini masih sangat sederhana dan menggunakan data statis. Jika kamu ingin yang lebih canggih, kamu perlu mendaftar ke layanan API seperti RajaOngkir atau sejenisnya, lalu mengintegrasikan API mereka ke dalam kode JavaScript ini.

Apakah kamu memiliki pertanyaan tentang salah satu bagian kodenya, atau ingin saya jelaskan lebih lanjut tentang cara menyesuaikan template ini?

Nge BLOG

Search Suggest