Cara Memasukkan Peta di Blog – WordPress dan Blogspot

Pada artikel ini saya membagikan tutorial lengkap bagaimana cara memasukkan atau menambahkan tampilan Peta/Map di blog, untuk WordPress maupun Blogspot/Blogger. Pada tutorial sebelumnya saya juga pernah membuat tentang

Ada beberapa kondisi yang memungkinkan kita untuk menempatkan lokasi peta di blog/website kita. Salah satu diantaranya misalnya kita ingin pengunjung mengetahui lokasi kantor kita, dan lain sebagainya.

Ohiya, disclaimer dalam tutorial ini saya menggunakan peta/map dari miliknya google ya. Nantinya tutorial saya bagi menjadi 2 bagian, yaitu ketika menggunakan WordPress dan mengguakan Blogspot/Blogger. Caranya sebetulnya mirip, hanya saja penempatan kodenya mungkin yang perlu di perhatikan.

Baiklah tampa berlama-lama berikut ini langkah-langkahnya:

Daftar isi:

Mendapatkan Kode Embed Peta di Google Map

Sebelum kita memasukkan kode peta di dalam blog kita, terlebih dahulu kita harus menemukan kode embed/sematkan di Google Map. Berikut ini langkah-langkah untuk mendapatkan kode Embed di Google Map:

  1. Buka Google Map
  2. Cari lokasi peta yang akan kita tampilkan di blog.
  3. Klik Bagikan
  4. Klik Menu Tab Sematkan Peta
  5. Klik Salin HTML

Lebih lengkapnya silahkan lihat gambar berikut ini:

Cara Memasukkan Peta di Blog - Wordpress dan Blogspot |

Jika Anda perhatikan pada sebelah kiri kode HTML, di sana Anda juga bisa mengatur ukuran dari Map, ada beberapa pilihan ukuran seperti Kecil, Sedang, Besar, serta Ukuran khusus (kita bisa mengatur sendiri ukurannya)

Sematkan Peta di WordPress

Untuk melakukan embed/sematkan peta di wrodpress cukuplah mudah, berikut langkah-langkahnya:

  1. Buka post editor/halaman editor
  2. Tambahkan blok dengan memilih HTML
Cara Memasukkan Peta di Blog - Wordpress dan Blogspot |
  1. Masukkan kode Embed yang baru saja kita salin di Google Map.
  2. Klik Pratinjau untuk melihat hasilnya.
Cara Memasukkan Peta di Blog - Wordpress dan Blogspot |

Anda pada bagian ini juga masih bisa mengatur ukuran width (lebar) dan height (tinggi) dari tampilan peta. Letaknya sebagaimana yang saya tandai warna kuning gambar di atas.

Sematkan Peta di Blogspot

Embed/sematkan peda di Blogspot/Blogger cukuplah mudah. Caranya sebenarnya sama dengan cara sematkan peda di WordPress, hanya saja penempatan kodenya yang berbeda. Berikut ini langkah-langkah embed peta di blogspot:

  1. Buka post editor/halaman editor
  2. Klik icon Tampilan menulis, posisi berada pada bagian kiri atas editor.
  3. Kemudian ubah menjadi Tampilan HTML.
  4. Paste/Tempel kode yang Anda salin tadi
Cara Memasukkan Peta di Blog - Wordpress dan Blogspot |

Untuk melihat hasilnya, Anda ubah tampilan menjadi mode Tampilan menulis lagi. Ohya pada bagian tersebut Anda juga masih bisa untuk mengubah ukuran width (lebar) dan height (tinggi) dari tampilan peta. Kode yang harus diubah sebagaimana tampilan gambar pada wordpress sebelumnya.

Penutup

Itulah tadi langkah-langkah bagaimana cara menampilkan peta di dalam blog kita. Cara yang harus kita lakukan pertama harus mengambil kode embed terlebih dahulu di halaman Google Map. Kemudian baru kita masukkan di dalam blog kita dengan tampilan mode HTML.

Jika ada yang perlu di diskusikan jangan ragu untuk menulisnya di kolom komentar.

Photo of author

Thoha Firdaus

Seorang yang suka mengajar, nulis di blog, buat video youtube, mencari hal yang baru.

Facebook Twitter Instagram Youtube

PENTING: Bantu kami memblokir iklan yang berbau sensitif dan pornografi dengan mengirimkan screenshot ke email: mail[et]thoha.id.

2 pemikiran pada “Cara Memasukkan Peta di Blog – WordPress dan Blogspot”

  1. Haiii….. Terimakasih atas informasinya yang sangat bermanfaat. Seiring perkembangan zaman yang serba menggunakan teknologi canggih ini, informasi apapun dapat dengan mudah didapatkan di internet. Cara untuk memasang atau membagikan url google maps di website ini pun tersedia banyak referensinya di internet. Jangan lupa kunjungi laman web kampus kami tercinta walisongo.ac.id

    Balas

Tinggalkan komentar