Thêm nút chat zalo vào blogspot không cần tạo Zalo Official Account

   - Sau một thời gian tìm kiếm trên mạng cách để thêm nút chat zalo vào cho blog. Mình thấy hầu như tất cả đều hướng dẫn cách để tạo  Zalo Official Account khá phiền phức.

   - Rồi có lần tình cờ thấy được video của bác Hồng Vlogs chia sẻ đúng thứ mình cần thế là mang về và thêm chút hiệu hứng CSS cho nó.

   - Nay mình xin chia sẻ lại cho bạn nào cần nhé. (các bạn có thể vào video của bác Hồng để tải code góc tại đây.)

   - Cách thêm code khá đơn giản là các bạn chỉ cần vào phần bố cục và thêm tiện ích HTML/javascript(thường là thêm vào phần footer) dán code bên dưới vào và lưu lại thế là xong.

***Chú ý: các bạn nhớ thay số điện thoại zalocủa mình vào số điện thoại mình tô vàng trong code nhé.

Xem demo:

<div class='zalome'><a href='https://zalo.me/0888123131' target='_blank'>

<img alt='icon zalo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4-KFLZFv-PEW3Y-VZZi7vSThqOtRSuaOo75Bw8CMAOLkO6LcyC127k8AEoY7dhrf2vqdIz4IV0SHB0kAUNA81bHWYDVcH9GPjfx1ddmOVk06mAFDZ_pm6CMmOlQ6Bx19uV22N4ejMo4OH/s0/icon-zalo.png'/>

</a></div>

<style>

@media (max-width: 576px){

.fb-customerchat{display:none;}

}

/*.zalo-chat-widget {*/

/*    left: 0!important;*/

/*}*/

.zalome {

    position: fixed;

    bottom: 15px;

    right: 90px;

    margin: 10px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

  background-color: #004A7F;

  color: #FFFFFF;

  cursor: pointer;

  display: inline-block;

  font-family: Arial;

  font-size: 20px;  

  padding: -10px -10px;  

  text-align: center;  

  text-decoration: none;

}

@-webkit-keyframes glowing {

  0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }

  50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; }

  100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }

}

@-moz-keyframes glowing {

  0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }

  50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; }

  100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }

}

@-o-keyframes glowing {

  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }

  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }

  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }

}

@keyframes glowing {

  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }

  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }

  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }

}

.zalome {

  -webkit-animation: glowing 1500ms infinite;

  -moz-animation: glowing 1500ms infinite;

  -o-animation: glowing 1500ms infinite;

  animation: glowing 1500ms infinite;

}

</style>

Chúc các bạn thành công!