Membuat menu navigasi chat dan learn more di blogger

Hello sobat Icloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol navigasi chat dan learn more mode megambang di blogger

Info: Oke sobat icloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Navigasi Chat da learn more

Menu navigasi chat dan learn more adalah suatu fitur khusus yang di tampilkan di dalam sebuah blog ataupun website, sedangkan fungsi tombol navigasi chat dan learn more tersebut adalah untuk menampilkan dan juga menyematkan link dari informasi kontak yakni lebih tepatnya WhatsApp dan informasi learn more ataupun pelajari lebih lanjut tersebut

Menggunakan CSS

Sedangkan untuk membuat tampilan navigasi tombol chat dan learn more tersebut di buat hanya menggunakan kode CSS saja, dan tida ada unsur penggunaan kode javascript di dalam membuat tampilan tombol navigasi mengambang (fixed) tersebut, cukup kita gunakan kode CSS saja, dan pastinya ringan dan juga responsive pada tampilan mobile dan desktop

Mode Mengambang

Lagi lagi fitur tombol menu navigasi melayang tersebut menggunakan gaya mengambang ataupun metode melayang, sedangkan nantinya tampilan dari tombol navigasi chat dan learn more melayang tersebut akan muncul di bawah blog dan postinya tidak akan mengganggu penglihatan pengunjung blog

Contoh Tampilan

Jika kamu sudah penasaran bagaimana kah sebenarnya contoh tombol menu navigasi chat dan learn more mode melayang di blogger, silahkan kamu gunakan tombol di bawah ini untuk memeriksa nya

• Periksa

Info: Bagaimana aibat dengan contoh tampilan nya keren sekali yak pastinya lah keren

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana kah caranya membuat tombol menu navigasi chat dan melayang di blogger, silahkan baca dan pelajari secara perlahan ok

Kode CSS

Seperti biasa langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]</b:skin>

.rahnav-btn-cus{background-color:#fefefe;box-shadow:0 -5px 15px 0 rgb(30 30 30 / 7%);display:none;align-items:center;position:fixed;bottom:0;left:0;right:0;height:55px;padding:0 20px; font-size:13px}
.rahnav-btn-cus .rah-lrn{display:flex;flex-grow:1;margin:0 0 0 7px;justify-content:center;line-height:1.8em}.rah-lrn{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#20409A;font-size:14px;font-family:Roboto;white-space:nowrap;overflow:hidden;max-width:100%}.rahnav-btn-cus .rah-lrn svg{margin-right:8px;fill:#fefefe; height:20px}.rahnav-btn-cus .rah-lrn svg.line{stroke:#fefefe}@media screen and (max-width:640px){.rahnav-btn-cus{display:flex}}.rahnav-btn-cus .WhatsApp{display:flex;align-items:center;flex-shrink:0; margin:0;padding:10px 15px;border:0px solid rgba(0,0,0,.1);border-radius:2px;color:inherit;font-size:inherit}.rahnav-btn-cus .WhatsApp span{margin-left:8px}

Info: Atau sobat bisa menggunakan tag kode < style untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>

<div class='rahnav-btn-cus'>
<a class='WhatsApp' href='https://api.whatsapp.com/send?phone=6285834306926&amp;text=Assalamualaikum,%0ASaya%20ingin%20bertanya%20tentang%20%2ABlogger Template ICloudice.com%2A%0A%0Avia%20%3A%20https://icloudice.com' rel='noreferrer' target='_blank'>
 <svg viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path clip-rule='evenodd' d='M7.69524 13.3909C7.05048 13.3909 6.52667 12.8671 6.52667 12.2223C6.52667 11.5794 7.05048 11.0556 7.69524 11.0556C8.34001 11.0556 8.86382 11.5794 8.86382 12.2223C8.86382 12.8671 8.34001 13.3909 7.69524 13.3909ZM12.2381 13.3909C11.5933 13.3909 11.0695 12.8671 11.0695 12.2223C11.0695 11.5794 11.5933 11.0556 12.2381 11.0556C12.8829 11.0556 13.4067 11.5794 13.4067 12.2223C13.4067 12.8671 12.8829 13.3909 12.2381 13.3909ZM15.6125 12.2223C15.6125 12.8671 16.1363 13.3909 16.7811 13.3909C17.4258 13.3909 17.9496 12.8671 17.9496 12.2223C17.9496 11.5794 17.4258 11.0556 16.7811 11.0556C16.1363 11.0556 15.6125 11.5794 15.6125 12.2223Z' fill-rule='evenodd'>
</path>
<path class='line' clip-rule='evenodd' d='M12.02 2C6.21 2 2 6.74612 2 12.015C2 13.6975 2.49 15.4291 3.35 17.0115C3.51 17.2729 3.53 17.6024 3.42 17.9139L2.75 20.1572C2.6 20.698 3.06 21.0976 3.57 20.9374L5.59 20.3375C6.14 20.1572 6.57 20.3866 7.08 20.698C8.54 21.5583 10.36 22 12 22C16.96 22 22 18.1642 22 11.985C22 6.65598 17.7 2 12.02 2Z' fill-rule='evenodd'>
</path>
 </svg>
 <span>
Chat
 </span>
</a>
<a class='rah-lrn' href='https://api.whatsapp.com/send?phone=6285834306926&amp;text=Assalamualaikum,%0ASaya%20ingin%20bertanya%20tentang%20%2ABlogger Template ICloudice.com%2A%0A%0Avia%20%3A%20https://icloudice.com' rel='noreferrer' target='_blank'>
 <svg class='line' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path clip-rule='evenodd' d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z' fill-rule='evenodd'>
</path>
<path clip-rule='evenodd' d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z' fill-rule='evenodd'>
</path>
<path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'>
</path>
<path d='M14.1254 10.795H16.8984'>
</path>
 </svg>
 <span>
Learn more
 </span>
</a>
 </div>

Info: Fungsi dari kode HTML di atas adalah untuk menampilkan tombol navigasi chat dan learn more tersebut

Penjelasan

Masih harus di jelaskan tombol menu navigasi tersebut tidak membuatuhkan tombol tambahan apapun, hanya saja tampilan dari menu navigasi chat dan learn more tersebut hanya muncul pada tampilan mobile, sedangkan pada tampilan desktop tombol tersebut tidak akan berfungsi alias tidak tampil

Chat Learn more