nafasmedia | Apa kabar semua? Apakah sudah puas dengan tombol share keren di blog ? jika belum saya akan berikan tutorial agar blog kalian semakin keren. disini saya akan membagikan cara membuat Tombol Contact Us atau Tombol Chat melayang diblogger. dengan tampilan tombol yang keren dengan icon yang modern, tombol ini akan membuat blog kalian akan menjadi lebih bagus.
Mungkin kalian pernah membaca sebuah artikel cara memasang tombol chat kirim ke whats app. dan dengan tombol tersebut hanya ditujukan untuk chat ke aplikasi whats app saja, karena tombol tersebut berbentuk icon whatsapp. dan apabila jika ditujukan ke link Contact Us jadinya kurang pas ya, masak tombol chat whats app kok linknya menuju halaman Contact Us. tpi dengan tombol yang saya bagikan ini bisa dibuat menuju link kemana saja, yang penting untuk urusan contact mengcontact saja.
Sebelumnya bagi kalian yang penasaran bagaimana bentuk dari tombol Contact Us yang akan kita buat, kalian bisa melihat di codepen dibawah ini, silahkan tekan tombol demo dibawah ini.
DEMO CODEPEN:
DEMO ON WEBSITE:
Bagaimana sudah tau apa yang akan kita terapkan? jika kalian ingin menerapkannya silahkan ikuti langkah langkah yang saya berikan dibawah.
Perhatian!!! jika blog anda ada tombol back to top nya, silahkan hapus, karena kita akan memasang tombol Contact Us nya disitu. tombol back to top biasanya ada di atas kode </body>. jika tidak ketemu silahkan cari saja dengan mengetikan kata kunci "back to top", jika sudah ketemu hapus saja kode pembuka dan penutupnya.
TUTORIALNYA:
Pertama silahkan masuk ke akun blogger kalian masing masing, lalu ke menu Template lalu edit html. jika sudah copy code css dibawah ini dan letakkan diatas kode </style> atau ]]><b:skin>.
/*chat dekstop*/
.nfschat{display:flex;position:fixed}.nfschatbg{background-color:#263638;border-radius:50%;box-shadow:0 2.1px 1.3px rgba(0,0,0,.044),0 5.9px 4.2px rgba(0,0,0,.054),0 12.6px 9.5px rgba(0,0,0,.061),0 25px 20px rgba(0,0,0,.1);height:80px;left:50px;position:absolute;top:15px;width:54px;height:54px}.nfschat-bubble{cursor:pointer;position:relative;width:80px;height:80px;top:2px;left:38px}.nfschat-line{fill:none;stroke:#fff;stroke-width:2.75;stroke-linecap:round;transition:stroke-dashoffset 500ms cubic-bezier(.4,0,.2,1)}.nfschat-line1{stroke-dasharray:60 90;stroke-dashoffset:-20}.nfschat-line2{stroke-dasharray:67 87;stroke-dashoffset:-18}.nfschat-circle{fill:#fff;stroke:none;transform-origin:40%;transition:transform 500ms cubic-bezier(.4,0,.2,1)}#notif-wrapper{position:;width:100%;z-index:999}.nfschatdekstop{color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:5%;left:90%;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
/*chat mobile*/
.nfschatm{display:flex;position:fixed}.nfschatbgm{background-color:#263638;border-radius:50%;box-shadow:0 2.1px 1.3px rgba(0,0,0,.044),0 5.9px 4.2px rgba(0,0,0,.054),0 12.6px 9.5px rgba(0,0,0,.061),0 25px 20px rgba(0,0,0,.1);height:80px;left:11px;position:absolute;top:15px;width:53px;height:53px}.nfschat-bubblem{cursor:pointer;position:absolute;width:79px;height:79px;top:2px}.nfschat-linem{fill:none;stroke:#fff;stroke-width:2.75;stroke-linecap:round;transition:stroke-dashoffset 500ms cubic-bezier(.4,0,.2,1)}.nfschat-line1m{stroke-dasharray:60 90;stroke-dashoffset:-20}.nfschat-line2m{stroke-dasharray:67 87;stroke-dashoffset:-18}.nfschat-circlem{fill:#fff;stroke:none;transform-origin:40%;transition:transform 500ms cubic-bezier(.4,0,.2,1)}#notif-wrapper{width:100%;z-index:999}.nfschatmobile{color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:8%;left:82%;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}#notif-wrapper{width:100%;z-index:999}.nfschatmobile{color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:8%;left:82%;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
Jika sudah kita akan panggil tombol yang sudah dibuat oleh kode css diatas. kita akan pasangkan di bawah website kalian atau tempat biasanya tombol back to top diletakkan. copy semua kode html dibawah ini dan letakkan diatas kode </body>.
<!-- chat nfs mobile -->
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='nfschatm nfschatmobile'>
<div class='nfschatbgm'/>
<a href='#'>
<svg class='nfschat-bubblem' height='100' viewBox='0 0 100 100' width='100'><g class='nfschat-bubblem'>
<path class='nfschat-linem nfschat-line1m' d='M 30.7873,85.113394 30.7873,46.556405 C 30.7873,41.101961 36.826342,35.342 40.898074,35.342 H 59.113981 C 63.73287,35.342 69.29995,40.103201 69.29995,46.784744'/>
<path class='nfschat-linem nfschat-line2m' d='M 13.461999,65.039335 H 58.028684 C 63.483128,65.039335 69.243089,59.000293 69.243089,54.928561 V 45.605853 C 69.243089,40.986964 65.02087,35.419884 58.339327,35.419884'/></g>
<circle class='nfschat-circlem' cx='42.5' cy='50.7' r='1.9'/>
<circle class='nfschat-circlem' cx='49.9' cy='50.7' r='1.9'/>
<circle class='nfschat-circlem' cx='57.3' cy='50.7' r='1.9'/>
</svg></a></div>
</b:if>
<!-- Chat nfs desktop -->
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='nfschat nfschatdekstop'>
<div class='nfschatbg'/>
<a href='#'>
<svg class='nfschat-bubble' height='100' viewBox='0 0 100 100' width='100'><g class='nfschat-bubble'>
<path class='nfschat-line nfschat-line1' d='M 30.7873,85.113394 30.7873,46.556405 C 30.7873,41.101961 36.826342,35.342 40.898074,35.342 H 59.113981 C 63.73287,35.342 69.29995,40.103201 69.29995,46.784744'/>
<path class='nfschat-line nfschat-line2' d='M 13.461999,65.039335 H 58.028684 C 63.483128,65.039335 69.243089,59.000293 69.243089,54.928561 V 45.605853 C 69.243089,40.986964 65.02087,35.419884 58.339327,35.419884'/></g>
<circle class='nfschat-circle' cx='42.5' cy='50.7' r='1.9'/>
<circle class='nfschat-circle' cx='49.9' cy='50.7' r='1.9'/>
<circle class='nfschat-circle' cx='57.3' cy='50.7' r='1.9'/>
</svg></a></div>
</b:if>
Simpan template dan lihat hasilnya, Jika terjadi error berarti ada kode yang bertabrakkan, atau salah penempatan kodenya. jika ada yang terjadi error silahkan lapor ke saya lewat kolom komentar dibawah.
PENUTUP:
Mungkin itu saja yang bisa saya sampaikan, semoga berhasil dan sampai jumpa di next artikel.
