Halo, kembali lagi di blog ini. Postingan kali ini mengulas tentang tutorial blogger setelah sebelumnya juga mengulas tutorial blogger.
Postingan yang diulas kali ini adalah mengenai Cara Memasang Lokasi atau Peta Google Maps di Blog. Tutorial kali ini lebih dikhususkan untuk postingan blog. Untuk mengetahui cara menambahkan atau memasang peta lokasi Google Maps di blog, silakan mengikuti langkah-langkah berikut ini.
Cara Memasang Peta Lokasi Google Maps di Blog
Cara menambahkan atau memasang peta lokasi Google Maps di blog cukup mudah dilakukan.
Langkah 1: Cukup klik BAGIKAN pada lokasi pilihan Anda. Setelah itu klik SEMATKAN PETA dan salin (copy) HTML lokasinya. Misalkan HTML peta lokasinya adalah seperti ini
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d32657805.653944384!2d99.41742990864684!3d-2.319796602841709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2c4c07d7496404b7%3A0xe37b4de71badf485!2sIndonesia!5e0!3m2!1sid!2sid!4v1553327051207" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Seperti yang sudah dijelaskan pada postingan sebelumnya, script embed di atas belum SEO frendly karena menggunakan tag iframe. Agar SEO friendly, Anda boleh mengubah kode <iframe menjadi <object, mengubah src menjadi data dan mengubah </iframe> menjadi </object>. Maka keseluruhan script HTML menjadi
<object data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d32657805.653944384!2d99.41742990864684!3d-2.319796602841709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2c4c07d7496404b7%3A0xe37b4de71badf485!2sIndonesia!5e0!3m2!1sid!2sid!4v1553327051207" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></object>
Langkah 2: Tempelkan (paste) HTML peta lokasinya di postingan Anda pada mode HTML. Selesai, boleh dipublish.
Jika Anda sudah mengikuti tutorial pada postingan sebelumnya, Anda tidak perlu lagi mengikuti langkah selanjutnya. Atau jika peta lokasi di postingan Anda responsive, Anda boleh tidak perlu mengikuti langkah selanjutnya.
Cara Agar Peta Lokasi Google Maps Responsive
Namun, terkadang peta lokasi Google Mapsnya tidak responsive. Hal ini disebabkan karena belum terdapat atau memasang CSS berikut sebelum ]]></b:skin>.
.post-body iframe,.post-body embed,.post-body object{max-width:100%;max-height:auto}
Umumnya, peta lokasi di postingan menjadi responsive karena pada templatenya sudah menggunakan kode CSS seperti (atau mirip) di atas.
Jika belum responsive, silakan ikuti langkah berikut.
Langkah 3: Buka Blogger > Tema > Edit HTML. Tambahkan kode CSS seperti di atas sebelum ]]></b:skin>.
Anda boleh menggunakan kode CSS berdasarkan rasio video youtube yang telah diposting sebelumnya. Maka, kode CSS lebih lengkapnya adalah
/* Maps Responsive by Blog ARS */
.post-body iframe,.post-body embed,.post-body object{max-width:100%;max-height:auto}
@media screen and (max-width:768px){.post-body iframe,.post-body embed,.post-body object{height:432px}}
@media screen and (max-width:600px){.post-body iframe,.post-body embed,.post-body object{height:337.5px}}
@media screen and (max-width:480px){.post-body iframe,.post-body embed,.post-body object{height:270px}}
@media screen and (max-width:320px){.post-body iframe,.post-body embed,.post-body object{height:180px}}
Langkah 4: Simpan Tema.
Berikut ini adalah peta lokasi contohnya.
***
Semoga tutorial Cara Memasang Peta Lokasi Google Maps di Blog dapat bermanfaat dan memudahkan bagi pembaca. Terima kasih.
