Blog iTeam OS
Trang chủ
Blogspot Tips

Cách thêm tiện ích trò chuyện WhatsApp trên Blogger

Xin chào, người đọc blog thân mến, chào mừng bạn đến với khung blog những ngày này, chúng ta sẽ xem cách tạo tiện ích WhatsApp trong mẫu blogger của chúng tôi. rất dễ dàng và đơn giản để tạo tiện ích WhatsApp cho mẫu blogger của bạn

Cách thêm tiện ích trò chuyện WhatsApp trên Blogger
Cách thêm tiện ích trò chuyện WhatsApp trên Blogger

Tiện ích WhatsApp là gì?

Trong trường hợp bạn không biết tiện ích WhatsApp là gì thì đừng lo lắng, tôi ở ngay đây để nâng cao kiến ​​thức của bạn. Tiện ích Whatsapp là một tiện ích trên mẫu blogger của bạn, cho biết bất kỳ nơi nào đến trang web của bạn. với sự trợ giúp của tiện ích này, khách hàng có thể dễ dàng liên hệ với bạn thông qua Whatsapp.

Ưu điểm của tiện ích WhatsApp

Có một tiện ích WhatsApp trên trang web của bạn hầu như là một lợi thế cho bạn vì trên thực tế, nó có thể hữu ích trong việc kết nối với khách hàng của bạn. với sự hỗ trợ của tiện ích WhatsApp, bạn có thể dễ dàng tương tác với người tiêu dùng của mình và lắng nghe họ. nó chắc chắn sẽ hỗ trợ để tạo ra một mối quan hệ chặt chẽ giữa bạn và khách hàng của bạn.

Nhược điểm của tiện ích WhatsApp

Theo ý kiến ​​của tôi, tôi không thấy bất kỳ nhược điểm nào để có một tiện ích WhatsApp cho trang web của bạn. Tiện ích Whatsapp không có javascript, vì vậy việc sử dụng nó cho trang web của bạn bây giờ sẽ không làm chậm việc tải trang web của bạn. có rất nhiều tiện ích WhatsApp tích hợp javascript, với nỗ lực làm chậm thời gian tải trang web của bạn. vì vậy tôi có thể không đề xuất bạn sử dụng chúng, vì thực tế là chúng sẽ làm giảm dần tốc độ tải trang web của bạn. thêm vào những người bạn có thể sử dụng tiện ích WhatsApp này.

Cách tạo Widget Whatsapp trên Blogger?

Rất đơn giản và suôn sẻ để áp dụng tiện ích WhatsApp vào tiện ích blogger cho trang web của bạn. bạn chỉ cần làm theo một kỹ thuật đơn giản.

Vì vậy, hãy xem cách tạo tiện ích WhatsApp:

Chúng tôi sẽ hoàn thành nó theo từng bước, vì vậy hãy làm theo các bước sau một cách hết sức thận trọng

  • Đi tới Blogger
  • Nhấp vào Chủ đề
  • Nhấp vào Mũi tên Sau đó Chỉnh sửa Html
  • Sau đó Tìm ]]> </ b: skin>
  • Sau đó sao chép và dán CSS được đưa ra bên dưới phía trên nó.

Thêm mã CSS

Copy Whole Code

  /* Chatbox Whatsapp */
:root {
--warna-background: #4dc247;
--warna-bg-chat: #f0f5fb;
--warna-icon: #fff;
--warna-text: #505050;
--warna-text-alt: #989b9f;
--lebar-chatbox: 320px;
}
.sticky-button{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px;
bottom: 76px;
width: 45px;
height: 45px;
background-color: #fefefe;
border-radius: 20px;
box-shadow: 0 10px 20px 0 rgba(30,30,30,.1);
}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:#4dc247}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;right:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--warna-background);overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}
.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--warna-text-alt)}
.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{
bottom: 77px;
right: 81px;
opacity: 1;
visibility: visible;
}

Thêm mã HTML

  1. Bạn có thể đặt mã HTML này ở các vị trí, đầu tiên là vị trí tốt nhất ở định dạng blogger, chỉ cần tải lên một tiện ích HTML mới trong thanh bên và dán tất cả mã HTML bên dưới
  2. Cách thứ hai là dán tất cả mã HTML lên trên thẻ </body> .

Toàn bộ có thể giống nhau, tùy thuộc vào bạn chọn kỹ thuật nào.

<input class='chat-menu hidden' id='offchat-menu' type='checkbox'/>
<div class='sticky-button' id='sticky-button'>
<label for='offchat-menu'>
<svg height="30px" viewBox="-1 0 511 512" width="30px" xmlns="http://www.w3.org/2000/svg"><path d="m435.1875 74.28125c-47.902344-47.898438-111.59375-74.28125-179.335938-74.28125-53.28125 0-104.277343 16.34375-147.472656 47.269531-4.492187 3.214844-5.527344 9.460938-2.3125 13.953125 3.21875 4.492188 9.464844 5.523438 13.953125 2.308594 39.78125-28.476562 86.75-43.53125 135.832031-43.53125 128.816407 0 233.617188 104.800781 233.617188 233.621094 0 128.816406-104.800781 233.617187-233.617188 233.617187-39.242187 0-78.050781-9.917969-112.230468-28.683593-2.269532-1.242188-4.929688-1.558594-7.421875-.886719l-111.320313 30.085937 30.351563-108.320312c.734375-2.617188.371093-5.417969-1.003907-7.757813-20.933593-35.671875-31.996093-76.492187-31.996093-118.054687 0-49.085938 15.054687-96.054688 43.53125-135.832032 3.214843-4.488281 2.179687-10.734374-2.308594-13.949218-4.492187-3.214844-10.738281-2.183594-13.953125 2.308594-30.925781 43.191406-47.269531 94.1875-47.269531 147.472656 0 43.683594 11.261719 86.617187 32.609375 124.460937l-33.96875 121.21875c-.972656 3.464844-.003906 7.183594 2.523437 9.738281 1.90625 1.917969 4.472657 2.960938 7.105469 2.960938.871094 0 1.746094-.113281 2.609375-.347656l124.464844-33.636719c36.238281 19.128906 77.042969 29.222656 118.273437 29.222656 67.746094 0 131.4375-26.378906 179.335938-74.285156 47.902344-47.898437 74.285156-111.589844 74.285156-179.335937 0-67.742188-26.378906-131.429688-74.28125-179.335938zm0 0"/><path d="m419.769531 374.839844c4.59375 3.066406 10.804688 1.828125 13.871094-2.765625 23.4375-35.117188 35.828125-76.078125 35.828125-118.457031 0-57.0625-22.21875-110.710938-62.5625-151.054688s-93.988281-62.5625-151.054688-62.5625c-57.066406 0-110.714843 22.21875-151.058593 62.5625s-62.5625 93.992188-62.5625 151.058594c0 38.007812 10.113281 75.328125 29.246093 107.929687l6.453126 11-19.550782 69.773438c-.972656 3.460937-.007812 7.179687 2.523438 9.734375 2.53125 2.554687 6.242187 3.554687 9.714844 2.617187l72.03125-19.46875 10.59375 5.816407c31.242187 17.152343 66.722656 26.214843 102.605468 26.214843 42.382813 0 83.34375-12.390625 118.457032-35.832031 4.59375-3.0625 5.832031-9.273438 2.765624-13.867188-3.066406-4.59375-9.273437-5.832031-13.867187-2.765624-31.816406 21.238281-68.9375 32.464843-107.355469 32.464843-32.527344 0-64.679687-8.210937-92.980468-23.746093l-14.125-7.757813c-2.265626-1.242187-4.925782-1.558594-7.421876-.886719l-58.9375 15.929688 15.953126-56.925782c.730468-2.617187.371093-5.417968-1.003907-7.757812l-8.609375-14.667969c-17.332031-29.535156-26.492187-63.355469-26.492187-97.808593 0-106.761719 86.859375-193.617188 193.621093-193.617188 106.761719 0 193.617188 86.855469 193.617188 193.621094 0 38.410156-11.226562 75.53125-32.464844 107.351562-3.066406 4.59375-1.828125 10.800782 2.765625 13.867188zm0 0"/><path d="m219.304688 222.902344.660156-.769532c8.957031-10.054687 6.695312-21.863281 3.21875-29.996093-5.136719-12.011719-18.574219-42.714844-19.847656-45.621094-1.984376-5.015625-8.605469-12.960937-21.921876-13.238281-10.382812-.210938-13.796874.082031-14.59375.179687-.082031.007813-.164062.019531-.242187.03125-1.53125.222657-37.546875 6.050781-43.765625 60.03125-2.859375 24.816407 8.632812 54.378907 34.15625 87.875 28.257812 37.082031 54.234375 59.164063 92.648438 78.75 19.128906 9.753907 47.070312 21.171875 73.082031 21.171875.84375 0 1.6875-.011718 2.523437-.039062 29.214844-.851563 44.816406-12.992188 52.757813-23.027344 8.429687-10.652344 10.191406-21.148438 10.445312-22.96875.167969-1.15625.574219-4.804688.832031-14.308594.359376-13.316406-7.265624-20.308594-12.179687-22.53125-2.777344-1.378906-31.410156-15.574218-43.148437-21.265625-7.925782-3.847656-19.578126-6.042969-30.066407 5.335938-.054687.058593-.105469.117187-.15625.167969-1.417969 1.238281-2.820312 3.085937-7.082031 8.789062-2.625 3.511719-7.863281 10.519531-10.089844 12.859375-4.703125.332031-20.429687-6.59375-42.722656-23.855469-14.050781-10.882812-29.054688-27.824218-37.355469-42.175781-.082031-.203125-.132812-.574219-.109375-.761719 3.441406-3.539062 9.042969-10.042968 12.957032-14.632812zm12.261718 73.382812c6.664063 5.160156 19.730469 14.773438 32.363282 21.183594 5.972656 3.027344 24.148437 12.25 35.355468 2.332031 3.09375-2.738281 7.488282-8.507812 13.355469-16.359375 1.691406-2.261718 3.769531-5.039062 4.574219-6 .523437-.476562.957031-.945312 1.351562-1.375 1.800782-1.953125 2.621094-2.84375 6.632813-.898437 12.046875 5.84375 42.101562 20.75 43.179687 21.28125.371094.371093.949219 1.578125.882813 3.980469-.222657 8.289062-.546875 11.285156-.613281 11.847656-.042969.207031-.023438.082031-.046876.308594-.117187.679687-1.375 7.382812-6.886718 13.964843-7.773438 9.289063-20.246094 14.246094-37.074219 14.734375-22.5.667969-48.269531-9.945312-65.941406-18.957031-35.953125-18.335937-59.214844-38.136719-85.828125-73.058594-21.96875-28.828125-32.410156-54.234375-30.195313-73.464843 4.171875-36.207032 24.015625-41.894532 26.675781-42.496094.9375-.058594 4.109376-.191406 11.648438-.035156 2.402344.050781 3.578125.6875 3.933594 1.074218.496094 1.132813 14.59375 33.335938 19.855468 45.648438 2.628907 6.152344 1.015626 7.964844.238282 8.835937-.140625.15625-.261719.296875-.367188.414063l-.574218.675781c-5.777344 6.769531-9.84375 11.375-12.085938 13.675781-7.382812 7.585938-6.683594 18.085938-2.902344 24.632813 9.617188 16.664062 26.289063 35.523437 42.46875 48.054687zm0 0"/><path d="m83.585938 91.351562c2.402343 0 4.8125-.859374 6.726562-2.601562 4.085938-3.714844 4.390625-10.039062.675781-14.125-3.71875-4.085938-10.039062-4.386719-14.128906-.671875l-.003906.003906c-4.085938 3.714844-4.382813 10.035157-.667969 14.125 1.972656 2.167969 4.679688 3.269531 7.398438 3.269531zm0 0"/><path d="m392.433594 390.871094-.003906.007812c-3.714844 4.085938-3.410157 10.40625.675781 14.121094 1.914062 1.742188 4.320312 2.601562 6.722656 2.601562 2.71875 0 5.429687-1.105468 7.402344-3.277343 3.71875-4.085938 3.414062-10.410157-.671875-14.125-4.085938-3.714844-10.410156-3.414063-14.125.671875zm0 0"/></svg>
</label>
</div>
<div class='sticky-chat'>
<div class='chat-content'>
<div class='chat-header'>
<svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'></path></svg>
<div class='title'> Blog Bracket <span>Discuss about web designing & Tech</span></div>
</div>
<div class='chat-text'>
<span>Hello, How can we help you?</span>
<span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'></circle><circle cx='416' cy='256' r='48'></circle><circle cx='96' cy='256' r='48'></circle></svg></span>
</div>
</div>
<a class='chat-button' href='https://api.whatsapp.com/send/?phone=910000000000' rel='nofollow noreferrer' target='_blank'>
<span>Start chat...</span>
<svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'></path></svg>
</a>
</div>

Hướng dẫn

Tìm Blog Bracket và thay thế nó bằng tiêu đề blog của bạn.

Tìm 910000000000và thay thế nó bằng số WhatsApp của bạn.

Kết luận

Hy vọng bạn thêm Tiện ích WhatsApp tuyệt vời này vào blog của mình. Nếu bạn gặp bất kỳ vấn đề nào để thêm tiện ích này, vui lòng để lại bình luận. Ngay khi có thể, tôi sẽ trả lời bình luận của bạn. Cảm ơn.

Truy cập Bypass Google Account APK để tải file APK nhé