Cara Menambahkan Peta Google Maps Responsive Ke Website Atau Blog

Sepertinya untuk kini ini punya tampilan website/blog yang resposive ibarat menjadi sebuah keharusan, sehingga para web master mau tidak mau harus dapat membuat tampilan websitenya menjadi Responsive. Sebelumnya Saya pernah membagikan wacana bagimana Teknik Membuat Navigasi Menu Website Responsive , nah kini Saya ingin membagikan sebuah cara wacana bagimana membuat tampilan Google Maps yang dimenambahkan ke Website atau blog menjadi Responsive.

Untuk membuat tampilan dari peta Google Maps yang kita menambahkan ke blog/website menjadi Responsive,  kita spesialuntuk perlu sedikit menambahkan/menciptakan instruksi CSS. Pada tutorial kali ini Saya ingin membuat tampilan peta responsive pada blog, jadi yang perlu Saya lakukan spesialuntuklah melaksanakan Edit HTML kemudian menambahkan beberapa susunan CSS.

Berikut ialah Teknik Menambahkan Peta Google Maps Responsive ke Website atau Blog.

1. Masuk ke Blog, pilih sajian Template > Edit HTML  
2. Cari instruksi <b:skin><![CDATA[/* atau agar lebih cepat tekan CTRL+F kemudian menambahkan instruksi di bawah ini sempurna dibawahnya atau taruh saja diantara susunan CSS yang sudah ada
   

   /*CSS PETA RESPONSIVE */ .peta-responsive{     overflow:hidden;     padding-bottom:56.25%;     position:relative;     height:0; } .peta-responsive iframe{     left:0;     top:0;     height:100%;     width:100%;     position:absolute; } 

3. Simpan template
4. Langkah selanjutnya kita lakukan iframe/embed sebuah peta yang ingin kita menambahkan ke blog, kurang lebih nanti kodenya ibarat diberikut
   
   
   
   

   <iframe allowfullscreen="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.852157993069!2d108.49361531477754!3d-7.6990103944501005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6595959d9a9d33%3A0x2b7b277d2edbaf7c!2sPangandaranlife.com!5e0!3m2!1sen!2s!4v1470647116998" style="border: 0;" frameborder="0" height="450" width="600"></iframe>

   
   
5. Misal kali Saya ingin menambahkan peta tersebut ke sebuah laman di blog, maka Saya spesialuntuk cukup membuat laman gres kemudian melekat instruksi tersebut dalam mode HTML, dengan memakai tag <div> dan melaksanakan penggilan class "Peta Responsive" dari tag tersebut, jadi nanti kodenya akan terlihat ibarat diberikut
   
   

   <div class="peta-responsive"> <iframe allowfullscreen="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.852157993069!2d108.49361531477754!3d-7.6990103944501005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6595959d9a9d33%3A0x2b7b277d2edbaf7c!2sPangandaranlife.com!5e0!3m2!1sen!2s!4v1470647116998" style="border: 0;" frameborder="0" height="450" width="600"></iframe></div>

Untuk melihat hasilnya, mungkin Anda perlu mencobanya sendiri.

Share :