Membuat Postingan Gambar Grid Tiga Kolom Di Blogspot
Blogspot (Blogger) memiliki editor bawaan yang cukup canggih, jadi Anda sebenarnya bisa mengunggah gambar langsung melalui tombol "Insert image" di editor. Namun, jika Anda ingin menyisipkan kode HTML secara manual (misalnya untuk kontrol layout yang lebih detail atau jika gambar sudah dihosting di tempat lain), ini adalah caranya.
Asumsi:
- Anda sudah memiliki URL/link langsung ke masing-masing gambar tersebut. Jika belum, Anda perlu mengunggah gambar ke hosting gambar (misalnya Google Photos, Imgur, atau langsung ke Blogspot lalu salin URL-nya). Untuk contoh ini, saya akan menggunakan placeholder URL_GAMBAR_1, URL_GAMBAR_2, dan URL_GAMBAR_3.
- Anda ingin tampilan seperti grid 3 kolom seperti di gambar asli.
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;">
<div style="width: 300px; border: 1px solid #ddd; padding: 15px; text-align: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);">
<a href="URL_LINK_PRODUK_1_ANDA" target="_blank" rel="noopener noreferrer">
<img src="URL_GAMBAR_1" alt="Celana Dalam YADAILY Pink (6pcs)" style="max-width: 100%; height: auto; margin-bottom: 15px;">
</a>
<p style="font-weight: bold; margin-bottom: 5px;">TULIS JUDUL</p>
<p style="text-decoration: line-through; color: #888; font-size: 0.9em;">Rp140.000</p>
<p style="font-size: 1.2em; color: #E44D26; font-weight: bold;">Rp116.200</p>
<a href="URL_LINK_BELI_SEKARANG_1_ANDA" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #4CAF50; color: white; padding: 8px 15px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;">
🛒 Buy Now
</a>
</div>
<div style="width: 300px; border: 1px solid #ddd; padding: 15px; text-align: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);">
<a href="URL_LINK_PRODUK_2_ANDA" target="_blank" rel="noopener noreferrer">
<img src="URL_GAMBAR_2" alt="Celana Dalam Polos Multi-warna (12pcs)" style="max-width: 100%; height: auto; margin-bottom: 15px;">
</a>
<p style="font-weight: bold; margin-bottom: 5px;">TULIS JUDUL</p>
<p style="font-size: 1.2em; color: #E44D26; font-weight: bold;">Rp11.870 - Rp35.500</p>
<a href="URL_LINK_BELI_SEKARANG_2_ANDA" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #4CAF50; color: white; padding: 8px 15px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;">
🛒 Buy Now
</a>
</div>
<div style="width: 300px; border: 1px solid #ddd; padding: 15px; text-align: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);">
<a href="URL_LINK_PRODUK_3_ANDA" target="_blank" rel="noopener noreferrer">
<img src="URL_GAMBAR_3" alt="Celana Dalam Polos Nude/Coklat (12pcs)" style="max-width: 100%; height: auto; margin-bottom: 15px;">
</a>
<p style="font-weight: bold; margin-bottom: 5px;">TULIS JUDUL</p>
<p style="font-size: 1.2em; color: #E44D26; font-weight: bold;">Rp5.500 - Rp31.900</p>
<a href="URL_LINK_BELI_SEKARANG_3_ANDA" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #4CAF50; color: white; padding: 8px 15px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;">
🛒 Buy Now
</a>
</div>
</div>
Bagaimana cara menggunakannya di Blogspot:
Buka Editor Postingan Blogspot: Masuk ke akun Blogger Anda, lalu buat postingan baru atau edit postingan yang sudah ada.
- Pilih Tampilan HTML: Di editor postingan, cari tombol atau opsi untuk beralih dari mode "Compose" (Tulis) ke mode "HTML View" (Tampilan HTML). Biasanya ikonnya < > atau ada di menu dropdown.
- Tempel Kode: Salin seluruh kode HTML di atas dan tempelkan ke dalam area editor HTML.
- Ganti Placeholder:
- Ganti URL_GAMBAR_1, URL_GAMBAR_2, URL_GAMBAR_3 dengan URL aktual dari gambar-gambar Anda.
- Ganti URL_LINK_PRODUK_1_ANDA, URL_LINK_PRODUK_2_ANDA, URL_LINK_PRODUK_3_ANDA dengan link ke halaman produk di marketplace atau toko online Anda (ini adalah link saat orang mengklik gambarnya).
- Ganti URL_LINK_BELI_SEKARANG_1_ANDA, URL_LINK_BELI_SEKARANG_2_ANDA, URL_LINK_BELI_SEKARANG_3_ANDA dengan link langsung untuk "Buy Now" (misalnya link keranjang belanja atau halaman checkout langsung).
5. Pratinjau atau Publikasikan: Beralih kembali ke mode "Compose" untuk melihat hasilnya, atau langsung publikasikan postingan Anda.
Cara Mendapatkan URL Gambar di Blogspot:
Jika Anda ingin mengunggah gambar langsung ke Blogspot:
- Di editor postingan Blogspot (mode "Compose"), klik ikon "Insert image".
- Unggah gambar dari komputer Anda.
- Setelah gambar terunggah dan muncul di editor, klik gambar tersebut sekali.
- Klik ikon "Link" (rantai) atau opsi "Properties" jika ada. URL gambar akan terlihat di sana. Salin URL tersebut.
 |
| Contoh Tampilan Gambar Grid 3kolom |
Penjelasan Kode:
- <div style="display: flex; ...">: Ini adalah kontainer utama yang menggunakan Flexbox untuk mengatur tiga produk dalam satu baris.
- display: flex;: Mengaktifkan Flexbox.
- flex-wrap: wrap;: Memungkinkan item untuk pindah ke baris baru jika lebar layar tidak cukup.
- justify-content: space-around;: Mendistribusikan ruang kosong di sekitar item.
- gap: 20px;: Memberikan jarak antar item.
- <div style="width: 300px; ...">: Ini adalah div untuk setiap "kartu" produk.
- width: 300px;: Menentukan lebar tetap untuk setiap kartu.
- border, padding, text-align, box-shadow: Menambahkan gaya visual agar terlihat seperti kartu produk.
- <a href="..." target="_blank" rel="noopener noreferrer">: Ini adalah tag anchor (link).
- href: Tujuan link saat diklik.
- target="_blank": Membuka link di tab baru.
- rel="noopener noreferrer": Penting untuk keamanan saat membuka link di tab baru.
- <img src="..." alt="..." style="...">: Ini adalah tag gambar.
- src: URL dari gambar Anda.
- alt: Teks alternatif untuk gambar (penting untuk SEO dan aksesibilitas).
- max-width: 100%; height: auto;: Memastikan gambar responsif dan tidak melebihi lebar kontainernya.
- <p>: Tag paragraf untuk deskripsi dan harga.
- <span style="text-decoration: line-through;">: Untuk menampilkan harga coret.
- 🛒 Buy Now: Tombol sederhana yang distyling dengan CSS inline.
No comments