Cara membuat tombol lokasi map mode Popup diblogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol Lokasi pop up diblogger

Info: Baiklah jika kamu sudah penasaran yuk langsung aja kita bahas secara bersama sama oke

Tombol Popup

Tombol Lokasi tersebut akan tampil dalam mode Popup ataupun melayang didalam blog, nah nantinya pengunjung blog akan lebih mudah dalam menggunakan tombol tersebut untuk diklik

Link langsung

Selain menggunakan mode popup, tombol Lokasi tersebut menggunakan link langsung menuju laman chat Lokasi yang mana hal tersebut akan sangat bermanfaat sekali karena setiap pengunjung blog yang mengklik tombol tersebut, akan langsung diarahkan kelaman chat

Responsive

Karena pembuatan tombol chat Lokasi mode Popup tersebut dibuat menggunakan kode CSS, maka tampilannya akan benar benar responsive dan keren pastinya, maka tidak akan membuat blog kamu menjadi lambat karena memasang tombol chat Lokasi melayang diblog ini

Cara pembuatan

Baiklah sekarang saatnya admin akan menjabarkan bagaimana sih caranya membuat tombol chat Lokasi mode Popup diblogger, baca dan pelajari melalui artikel ini hingga selesai ok

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah, menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]><b:skin>

.__rahLokasiBtn a svg{
fill:#ffffff;
width:24px;
height:24px;
}
.__rahLokasiBtn a{
display:block;
position:fixed;
z-index:96;
bottom:54px;
right:1px;
width:53px;
height:53px;
background-color:#f80000;
color:#fff;
font-size:30px;
text-align:center;
line-height:52px;
box-shadow:0 0 8px rgba(0,0,0,.15);
border-radius:50%;
}

Info: Ataupun kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS tersebut

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini, kemudian kamu bisa meletakkannya diatas kode </body>

<div class='__rahLokasiBtn'>
            <a aria-label='share-lokasi' data-action='share/Lokasi/share' href='https://www.google.com/maps/place/0.7008314999999999,%20103.4250556'>
          <center>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1200 1200"><path fill="currentColor" d="M600 0C350.178 0 147.656 202.521 147.656 452.344c0 83.547 16.353 169.837 63.281 232.031L600 1200l389.062-515.625c42.625-56.49 63.281-156.356 63.281-232.031C1052.344 202.521 849.822 0 600 0zm0 261.987c105.116 0 190.356 85.241 190.356 190.356C790.356 557.46 705.116 642.7 600 642.7s-190.356-85.24-190.356-190.356S494.884 261.987 600 261.987z"/></svg>
          </center>
            </a>
           </div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan tombol chat Lokasi mode Popup tersebut