Memasang Kontak Whatsapp, Email, Instagram, Telepon Melayang di Blog | Pure CSS

Memasang Kontak Whatsapp, Email, Instagram, Telepon Melayang di Blog | Pure CSS

Snippet Tips Blogger

SobatMasbro

September 24, 2020

SobatMasbro - Saat ini sangat banyak kalangan masyarakat terutama milenial yang membuka usaha atau menjual produk secara online. Seperti Shopee, Lazada, tokopedia, dan masih banyak lagi. Selain itu mereka menjual dan mempromosikannya dalam berbagai media, seperti media social, toko offline, hingga membuat website sendiri.

Nah buat sobat yang menjual dan mempromosikan produknya terutama diwebsite sendiri itu websitenya harus difasilitasi dengan baik agar pembeli atau konsumen dapat membeli produk sobat dengan nyaman.

Apa saja fasilitas website yang wajib ada? Tentunya seperti fasilitas chat penjual, gambar produk, harga produk, dan yang paling penting desain websitenya.

Untuk kali ini saya akan membagikan Cara Memasang Kontak Whatsapp, Email, Instagram, Telepon di Blog dengan Pure CSS. Button contact ini sangat friendly apabila dipasang diwebsite sobat karena dengan tampilat CSS Pure yang indah bisa membuat konsumen betah diwebsite olshop sobat.

Tombol kontak ini melayang dipojok kiri bawah, tampilannya bergerak seperti gelombang. Saat diklik akan muncul dropup untuk memilih kontak apa saja yang si pembeli akan menghubungi penjual.

Detail

• Tombol melayang.
• Terdapat beberapa kontak (Whatsapp, Instagram, email, & telepon) sobat bisa menambahkannya sendiri.
• Friendly.
• Pure CSS.

Memasang Kontak Melayang di Blog

• Buka blogger.com
• Lalu buka menu Tema > Edit HTML
• Tambahkan kode CSS dibawah, Copy dan paste tepat diatas kode </style> agar mudah mencarinya tekan Ctrl+F.

.SobatMasbrocontact{position:fixed;z-index:999;left:20px;bottom:20px}.SobatMasbrocontact a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}.SobatMasbrocontact i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}.SobatMasbrocontact a span{font-family:'arial';font-size:15px;border-radius:2px;text-align:center;background:rgb(103,182,52);padding:9px;display:none;width:100px;margin-left:10px;position:absolute;color:#ffffff;z-index:999;top:0px;left:40px;transition:all 0.2s ease-in-out 0s;-moz-animation:headerAnimation 0.7s 1;-webkit-animation:headerAnimation 0.7s 1;-o-animation:headerAnimation 0.7s 1;animation:headerAnimation 0.7s 1}.SobatMasbrocontact a:hover span{display:block}.SobatMasbrocontact a{display:block}.SobatMasbrocontact a span:before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparentrgb(103,182,52) transparent transparent;position:absolute;left:-10px;top:6px}.gelombang-masbro-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-10px}.gelombang-masbro{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#0089B9;opacity:.5}.SobatMasbrocontact .btn-contact{cursor:pointer}

• Selanjutnya tambahkan kode ini tepat diatas kode </head>.

<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

• Tambahkan kode JavaScriptnya, tepat diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('.sobatmasbro-item').hide();
    $('a.btn-contact').click(function(e){
      e.stopPropagation();
      $('.sobatmasbro-item').slideToggle();
    });
    $('.sobatmasbro-item').click(function(e){
      e.stopPropagation();
    });
    $(document).click(function(){
      $('.sobatmasbro-item').slideUp();
    });
});
//]]>

• Dan yang terakhir tambahkan kode pemanggilnya, sama seperti tadi tambahkan tepat diatas kode </body>.

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<div class='SobatMasbrocontact'>
  <div class='sobatmasbro-item' style='display: none;'>
    <a class='chat-wa' href='https://api.whatsapp.com/send?phone=51955081075&amp;text=Hallo%21%20Saya%20tertarik%20untuk%20membeli%20produk%20Anda' rel='nof'>
      <i aria-hidden='true' class='fa fa-whatsapp'/>
          <div class='animated infinite zoomIn gelombang-masbro'/>
          <div class='animated infinite pulse gelombang-masbro-fill'/>
        <span>Chat Whatsapp</span>
    </a>
    <a class='ints' href='https://www.instagram.com/kejumozzarela'>
      <i aria-hidden='true' class='fa fa-instagram'/>
      <span>DM via Instagram</span>
    </a>
    <a class='chat-mail' href='mailto:kejumozzarela@gmail.com' target='_blank'>
      <i aria-hidden='true' class='fa fa-envelope-o'/>
      <span>Chat via Email</span>
    </a>
    <a class='call' href='tel:0812345678901'>
      <i aria-hidden='true' class='fa fa-phone'/>
      <span>Call</span>
    </a>
  </div>
  <a class='btn-contact'>
    <div class='animated infinite zoomIn gelombang-masbro'/>
          <div class='animated infinite pulse gelombang-masbro-fill'/>
    <i aria-hidden='true' class='fa fa-user-circle'/>
  </a>
</div>
  </html>

Ubah data berikut menjadi kontak sobat.

51955081075 menjadi No Whatsapp sobat.
Hallo%20Saya menjadi teks pesan. tulis seperti biasa %20 adalah spasi.
kejumozzarela menjadi username Instagram sobat tanpa '@'.
kejumozzarela@gmail.com menjadi email sobat.
0812345678901 menjadi No. telepon sobat.

• Jika sudah diubah, Simpan Tema.

Demo

Gimana sob? kerenkan? oke pastinya, sebenernya gampang sob, cuma masukin kode script doang kok ga ribet terus ganti kontaknya dengan data sobat.

Oke sob, cukup sekian tutorial yang saya bagikan Cara Membuat Kontak Whatsapp dan yang lainnya Melayang di blogger.

Jika ada yang error atau kesulitan sobat bisa berkomentar dibawah ini. Semoga bermanfaat dan terima kasih.

SobatMasbro September 24, 2020