Cara Membuat Sticky Button Chat Whatsapp di Blogger

Cara Membuat Sticky Button Chat Whatsapp di Blogger

Sempetin.my.id - Menggunakan link pintasan chat whatsapp di sebuah situs yang kita kelola adalah salah satu kelebihan yang harus dimiliki terutama jika anda mengelola situs bisnis seperti misalnya toko online atau situs penyedia jasa.

Dengan adanya fitur ini, tentu akan memudahkan para pengunjung untuk menghubungi anda agar dapat menanyakan tentang kondisi, harga, atau stock barang yang anda jual dengan mudah dan cepat dibalas oleh anda sebagai penjual.

Sebenarnya hanya bermodalkan html saja, link chat whatsapp ini bisa anda terapkan pada situs yang anda kelola. Hanya saja mungkin kurang di tampilannya, yang kurang simpel dan tentunya kurang menarik.

Pada umumnya livechat whatsapp ini bisa kalian temui pada situs berplatform wordpress tapi anda tidak perlu khawatir, karena platform blogger pun sekarang sudah bisa menerapkannya dengan tampilan yang menarik dan juga keren.

Cara ini sangat mudah diterapkan, hanya dengan menambahkan kode css dan html pada template, kalian sudah bisa menggunakan fitur ini. Untuk lebih jelasnya silahkan ikuti tutorial berikut,

Cara Membuat Sticky Button Whatsapp

  1. Pastikan anda telah login ke Blogger
  2. Pada dashboard blogger, silahkan pilih menu Template > Edit HTML
  3. Letakkan kode berikut ini tepat diatas kode </body>
    <a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
    <svg viewBox='0 0 24 24' width='34' height='34'>
    <path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
    </svg>
    </a>
  4. Lalu letakkan juga kode CSS nya dibawah ini, tepat diatas kode ]]></b:skin>
    .fixed-whatsapp {
         position: fixed;
         bottom: 20px;
         right: 20px;
         width: 50px;
         height: 50px;
         line-height: 50px;
         z-index: 9999;
         text-align: center;
    }
     .fixed-whatsapp:before {
         content: "";
         width: 50px;
         height: 50px;
         background-color: #00C853;
         position: absolute;
         border-radius: 100%;
         box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
         z-index: 1;
         top: 0;
         left: 0;
    }
     .fixed-whatsapp svg {
         vertical-align: middle;
         z-index: 2;
         position: relative;
    }
    Anda bisa kreasikan sendiri untuk letaknya dengan mengubah kode bottom, right, dan height.
  5. Save Template

Bagaimana? tentu mudah untuk menerapkannya kan? tutorial diatas tanpa menggunakan JQuery atau Javascript yang dimana akan menambah speed load halaman blog menjadi berat.
Jika ada kesulitan dalam menerapkan tutorial di atas, bisa anda tanyakan melalui kolom komentar yang ada dibawah artikel ini. Sebisa mungkin kami balas secepatnya jika tidak ada kesibukan.

Mungkin sekian dulu artikel kali ini yang bisa kami berikan, jika bermanfaat silahkan reshare artikel ini melalui tombol yang ada dibawah postingan.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

Tidak ada komentar