Skip to content Skip to sidebar Skip to footer
Home / Blogger / CSS / Web Programming

Cara Menambahkan Peta Google Maps Responsive Ke Website Atau Blog

By Anonymous Post a Comment
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.

  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
    Sepertinya untuk kini ini punya tampilan website Teknik Menambahkan Peta Google Maps Responsive ke Website atau Blog


    <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.

Post a Comment for "Cara Menambahkan Peta Google Maps Responsive Ke Website Atau Blog"