Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat tombol chat SMS mode Popup diblogger

views

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

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

Tombol Popup

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

Cara pembuatan

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

.__rahSmsBtn a svg{
fill:#ffffff;
width:24px;
height:24px;
}
.__rahSmsBtn a{
display:block;
position:fixed;
z-index:96;
bottom:54px;
right:12px;
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='__rahSmsBtn'>
            <a aria-label='share-sms' data-action='share/SMS/share' href='sms:085834306926?body=Assalamualaikum'>
          <center>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7c1.3 3 4.1 4.8 7.3 4.8c66.3 0 116-31.8 140.6-51.4c32.7 12.3 69 19.4 107.4 19.4c141.4 0 256-93.1 256-208S397.4 32 256 32zM128.2 304H116c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h12.3c6 0 10.4-3.5 10.4-6.6c0-1.3-.8-2.7-2.1-3.8l-21.9-18.8c-8.5-7.2-13.3-17.5-13.3-28.1c0-21.3 19-38.6 42.4-38.6H156c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8h-12.3c-6 0-10.4 3.5-10.4 6.6c0 1.3.8 2.7 2.1 3.8l21.9 18.8c8.5 7.2 13.3 17.5 13.3 28.1c.1 21.3-19 38.6-42.4 38.6zm191.8-8c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8v-68.2l-24.8 55.8c-2.9 5.9-11.4 5.9-14.3 0L224 227.8V296c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8V192c0-8.8 7.2-16 16-16h16c6.1 0 11.6 3.4 14.3 8.8l17.7 35.4l17.7-35.4c2.7-5.4 8.3-8.8 14.3-8.8h16c8.8 0 16 7.2 16 16v104zm48.3 8H356c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h12.3c6 0 10.4-3.5 10.4-6.6c0-1.3-.8-2.7-2.1-3.8l-21.9-18.8c-8.5-7.2-13.3-17.5-13.3-28.1c0-21.3 19-38.6 42.4-38.6H396c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8h-12.3c-6 0-10.4 3.5-10.4 6.6c0 1.3.8 2.7 2.1 3.8l21.9 18.8c8.5 7.2 13.3 17.5 13.3 28.1c.1 21.3-18.9 38.6-42.3 38.6z"/></svg>
          </center>
            </a>
           </div>

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

Contoh Tampilan

Baiklah sebagai pelengkapnya admin bakalan memberikan contoh tampilan dari tombol chat SMS dengan menggunakan tombol dibawah ini

Info: Bagaimana sobat dengan contoh tampilannya keren kan

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.