Home
Tutorial Blog

Cara Menyematkan Peta ke Postingan / Artikel

ARDAMAN

🗺️ Cara Menyematkan Peta ke Postingan / Artikel



✅ 1. Ambil Kode Embed dari Google Maps

  1. Buka Google Maps
  2. Cari lokasi (contoh: MS Grafika Jambi)
  3. Klik tombol Bagikan (Share)
  4. Pilih tab Sematkan peta (Embed a map)
  5. Klik Salin HTML (Copy HTML)

Contoh kode yang didapat:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!..." 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

✅ 2. Tempelkan ke Artikel Blogger

  1. Masuk ke Dashboard Blogger
  2. Buat atau edit postingan
  3. Klik mode HTML (bukan Compose)
  4. Tempel kode <iframe> tadi

Contoh:

<h3>Lokasi Kami</h3>
<p>Silakan kunjungi lokasi kami melalui peta berikut:</p>

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!..." 
  width="100%" 
  height="300" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

🎨 3. Supaya Lebih Rapi & Responsive (Opsional)

Tambahkan sedikit CSS agar tampilan lebih modern:

<div style="border-radius:15px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.3);">
  <iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!..." 
    width="100%" 
    height="300" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
  </iframe>
</div>

🔥 Tips Penting

  • Gunakan width="100%" agar responsive di HP
  • Gunakan loading="lazy" supaya lebih cepat loading
  • Pastikan lokasi sudah benar sebelum disalin
  • Bisa ditempatkan di:
    • Halaman kontak
    • Artikel lokasi usaha
    • Landing page

🚀 Contoh Penggunaan di Artikel

  • “Lokasi Toko Kami”
  • “Alamat Kantor”
  • “Tempat Event / Workshop”

🎯 Kesimpulan

Menyematkan peta sangat mudah:

  1. Ambil kode dari Google Maps
  2. Tempel di mode HTML Blogger
  3. Sesuaikan ukuran & tampilan

Post a Comment