Cara membuat tombol chat WhatsApp mode popup diblogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol wa pop up di blogger

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

Disclaimer

Sebelum saya benar benar membahas mengenai bagaimana caranya memasang translate atau penerjemah diblog, saya akan memberikan disclaimer dulu bahwa setiap artikel yang kami tuliskan disini adalah murni tulisan admin, jadi jika kamu ingin mengcopy paste harap sertakan link sumber oke

Ketika kamu sedang membaca artikel disini kemudian ada penjelasan yang tidak kamu pahami kamu bisa menyampaikannya dikolom komentar oke agar admin bisa memperbaiki penulisan didalam artikel ini

Peringatan: Artikel ini khusus untuk orang yang paham aja, atau orang yang sedang memerlukan artikel seperti ini untuk pengetahuannya, bagi kamu yang tidak paham sama sekali menjauh aja karena mungkin disini mungkin bukan tempat kamu untuk mendapatkan informasi

Tombol Popup

Tombol WhatsApp 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 WhatsApp tersebut menggunakan link langsung menuju laman chat WhatsApp 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 WhatsApp 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 WhatsApp melayang diblog ini

Cara pembuatan

Baiklah sekarang saatnya admin akan menjabarkan bagaimana sih caranya membuat tombol chat WhatsApp 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>

.__rahWhatshapBtn a{
display:block;
position:fixed;
z-index:96;
bottom:54px;
right:12px;
width:53px;
height:53px;
background-color:#128c7e;
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='__rahWhatshapBtn'>
            <a aria-label='share-whatsapp' data-action='share/whatsapp/share' href='whatsapp://send?phone=+6285834306926&amp;text=Assalamualaikum'>
             <i class='fa fa-whatsapp'>
             </i>
            </a>
           </div>

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