Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol telegram pop up diblogger
Info: Baiklah jika kamu sudah penasaran yuk langsung aja kita bahas secara bersama sama oke
Tombol Popup
Tombol Telegram 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 Telegram tersebut menggunakan link langsung menuju laman chat Telegram 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 Telegram 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 Telegram melayang diblog ini
Cara pembuatan
Baiklah sekarang saatnya admin akan menjabarkan bagaimana sih caranya membuat tombol chat Telegram 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>
.__rahTelegramBtn a svg{
fill:#fefefe;
width:24px;
height:24px;
}
.__rahTelegramBtn a{
display:block;
position:fixed;
z-index:96;
bottom:54px;
right:12px;
width:53px;
height:53px;
background-color:#0088cc;
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='__rahTelegramBtn'>
<a aria-label='share-telegram' data-action='share/Telegram/share' href='https://t.me/share/url?url&text=Assalamualaikum'>
<center><svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z'/></g></svg></center>
</a>
</div>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan tombol chat Telegram mode Popup tersebut
Contoh Tampilan
Baiklah sebagi pelengkapnya admin bakalan memberikan contoh tampilan dari tombol chat Telegram dengan menggunakan tombol dibawah ini
Info: Bagaimana sobat dengan contoh tampilannya keren kan