6 mẫu nút liên hệ tích hợp đẹp cho Blogspot

Nút liên hệ trên một website là công cụ chính giúp khách hàng liên lạc với các bạn dễ dàng hơn. Chắc chắn lượt liên hệ đến từ các button liên hệ này sẽ nhiều hơn so với một trang liên hệ tĩnh. Vì vậy các bạn cần phải làm đẹp các nút liên hệ này và tạo sự chú ý nhất định cho người xem.

Tuy nhiên khi các bạn có nhiều phương thức liên hệ như:

"Goi ngay"

"Chát Zalo"

"Messenger"

và nhiều hơn nữa, thì các bạn có thể tích hợp chúng lại thành một. Việc tích hợp các nút liên hệ này vừa giúp trang Web của các bạn chuyên nghiệp hơn, vừa không bị rối bố cục khi phải thêm nhiều nút.

Bài này mình chia sẻ với các bạn 6 mẫu nút liên hệ tích hợp đẹp cho Blogspot, mà mình sưu tập được nhé.

***Lưu ý: Từ mẫu 1 đến mẫu 4 đều có thư viện jquery.min.js trong code. Nếu template của các bạn đã có hãy xóa bỏ link trong code đi để tránh bị xung đột.

Mẫu 1:

Xem demo bên dưới hoặc xem

Code:

Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

//<![CDATA[

var _widget_settings = {

positions: 'bottom right',

support: {

staff: {

name: 'Minh Nguyệt',

image: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBbmfX1wKaVO-L7oyHeAoWDwRgKmI3HEcpgurVazmgbe83Q2Lmhyrv7uFc4vOWXafB5TqhS9VuqYppYUqDr-SApsWuCikoqw0TmfOnJH0lXDbIBQlIszhEGPoq1iDQh1AsqzKQky-PY4Cd/s100/lien-he-1.jpg',

messages: 'Không biết em có thể hỗ trợ gì cho anh/chị không ạ?'

}

buttons: {

contact: {

visible: 'true',

id: 'https://www.ntlruby.com/p/lien-he.html',

messages: 'Liên hệ'

email: {

visible: 'true',

id: '[email protected]',

messages: 'Gửi email'

call: {

visible: 'true',

id: '0900123456',

messages: 'Gọi điện'

sms: {

visible: 'true',

id: '0900123456',

messages: 'Nhắn tin'

viber: {

visible: 'false',

id: 'vhost.vn',

messages: 'Chat Viber'

telegram: {

visible: 'false',

id: 'vHostbot',

messages: 'Chat Telegram'

zalo: {

visible: 'true',

id: '0900123456',

messages: 'Chat Zalo'

facebook: {

visible: 'true',

id: 'NTLRUBYfanpage',

messages: 'Chat Facebook'

}

//]]></script>

Trong đó các bạn lưu ý thay đổi các thành phần mình tô vàng trong code như sau sau:

- Mục positions: Thay right thành left nếu muốn nút nằm bên trái

- Mục name: Tên nhân viên

- Mục image: Link ảnh, các bạn có thể thay link ảnh khác.

- Mục messages: Trên cùng là văn bản lời chào, các bạn có thể sửa lại theo ý của mình. Các mục messages còn lại là văn bản hiển thị của button.

- Các mục visible: Thay true thành false nếu không hiển thị và ngược lại. Trong code hiện đang ẩn button "Viber" và "Telegram".

- Các mục id: tùy theo mỗi button mà thay link phù hợp.

Nếu Template của các bạn đã có thư viện jquery.min.js rồi thì các bạn xóa bỏ link trong code đi nhé.

Mẫu 2:

Xem demo bên dưới hoặc xem

Code:

Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

<li><a class='messanger msg-item-facebook-messenger' href='https://m.me/NTLRUBYfanpage' id='msg-item-1' rel='nofollow noopener' target='_blank'><span style='background-color:#3B5998'> <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'> <path d='M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Messenger</div><div class='arcu-item-subtitle'>Nhắn tin qua Facebook</div></div> </a> </li>

<li><a class='messanger msg-item-viber' href='mailto:[email protected]' id='msg-item-3' rel='nofollow noopener' target='_blank'><span style='background-color:#848484'> <svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M40 8H8c-2.21 0-3.98 1.79-3.98 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H8V16l16 10 16-10v20zM24 22L8 12h32L24 22z' fill='#fff'/></svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Gửi Mail</div><div class='arcu-item-subtitle'>[email protected]</div></div> </a> </li>

<li><a class='messanger msg-item-viber' href='viber://chat?number=%2B84900900123' id='msg-item-3' rel='nofollow noopener' target='_blank'><span style='background-color:#812379'> <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'> <path d='M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z' fill='currentColor'/> </svg> </span><div class='arcu-item-label'><div class='arcu-item-title'>Liên hệ Viber</div><div class='arcu-item-subtitle'>Gọi hoặc nhắn tin Viber</div></div> </a> </li>

</ul></div> </div>

Trong code mình đã tách các button ra cho các bạn dễ nhìn, button nào cần thì để, không có thể xóa bỏ đi nhé. Và nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

Nếu Template của các bạn đã có thư viện jquery.min.js rồi thì các bạn xóa bỏ link trong code đi nhé.

Mẫu 3:

Xem demo bên dưới hoặc xem

Code:

Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

</svg>

</div>

</a>

</div>

<div>

</svg>

</div>

<div class='mes-us'>Facebook Messenger</div>

</a>

<div>

</svg>

</div>

</a>

<div>

</svg>

</div>

<div class='mes-us'>Call Viber</div>

</a>

<div>

</svg>

</div>

</a>

<div>

</svg>

</div>

</a>

<div>

</svg>

</div>

<div class='mes-us'>Whatsapp</div>

</a>

<div>

</svg>

</div>

<div class='mes-us'>Snapchat</div>

</a>

<div>

</svg>

</div>

</a>

<div>

</svg>

</div>

</a>

<div>

</svg>

</div>

<div class='mes-us'>Gửi Email</div>

</a>

<div>

</svg>

</div>

</a>

</div>

</div>

Nếu Template của các bạn đã có thư viện jquery.min.js rồi thì các bạn xóa bỏ link trong code đi nhé.

Mẫu 4:

Xem demo bên dưới hoặc xem

Code:

Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào trước thẻ </body>.

//<![CDATA[

var arCuMessages = ["Xin chào!", "Tôi có thể giúp gì cho bạn?"];

var arCuLoop = false;

var arCuCloseLastMessage = false;

var arCuPromptClosed = false;

var _arCuTimeOut = null;

var arCuDelayFirst = 2000;

var arCuTypingTime = 2000;

var arCuMessageTime = 4000;

var arCuClosedCookie = 0;

var arcItems = [];

window.addEventListener('load', function() {

arCuClosedCookie = arCuGetCookie('arcu-closed');

jQuery('#arcontactus').on('arcontactus.init', function() {

if (arCuClosedCookie) {

return false;

}

arCuShowMessages();

});

jQuery('#arcontactus').on('arcontactus.openMenu', function() {

clearTimeout(_arCuTimeOut);

arCuPromptClosed = true;

jQuery('#contact').contactUs('hidePrompt');

arCuCreateCookie('arcu-closed', 1, 30);

});

jQuery('#arcontactus').on('arcontactus.hidePrompt', function() {

clearTimeout(_arCuTimeOut);

arCuPromptClosed = true;

arCuCreateCookie('arcu-closed', 1, 30);

});

var arcItem = {};

arcItem.id = 'msg-item-1';

arcItem.class = 'msg-item-facebook-messenger';

arcItem.title = 'Messenger';

arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z"></path></svg>';

arcItem.href = 'https://m.me/NTLRUBYfanpage/';

arcItem.color = '#567AFF';

arcItems.push(arcItem);

var arcItem = {};

arcItem.id = 'msg-item-9';

arcItem.class = 'msg-item-telegram-plane';

arcItem.title = 'Zalo Chat';

arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>';

arcItem.href = 'https://zalo.me/090321456';

arcItem.color = '#1EBEA5';

arcItems.push(arcItem);

var arcItem = {};

arcItem.id = 'msg-item-6';

arcItem.class = 'msg-item-skype';

arcItem.title = 'Skype Chat';

arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z"></path></svg>';

arcItem.href = 'skype:live:.cid.38254504fa4d8168?chat';

arcItem.color = '#1C9CC5';

arcItems.push(arcItem);

var arcItem = {};

arcItem.id = 'msg-item-7';

arcItem.class = 'msg-item-envelope';

arcItem.title = 'Gửi Email';

arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg>';

arcItem.href = 'mailto:[email protected]';

arcItem.color = '#FF643A';

arcItems.push(arcItem);

var arcItem = {};

arcItem.id = 'msg-item-8';

arcItem.class = 'msg-item-phone';

arcItem.title = 'Call 0903611340';

arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>';

arcItem.href = 'tel:090369852';

arcItem.color = '#4EB625';

arcItems.push(arcItem);

jQuery('#arcontactus').contactUs({

items: arcItems

});

});//]]></script>

Trong đó các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

Nếu Template của các bạn đã có thư viện jquery.min.js rồi thì các bạn xóa bỏ link trong code đi nhé.

Mẫu 5:

Xem demo bên dưới hoặc xem

Code:

Mẫu này sẽ chuyển thành hàng ngang ở chân trang trên màn hình 600px trở xuống. Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào bố cục -> tiện ích HTML/JavaScript

<li><a href=" https://goo.gl/maps/gPQ4uRanB5xJ2Q3q8" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li> <li><a href="https://zalo.me/0888123131" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>

<li><a href=" https://www.messenger.com/t/ketoangsc" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>

<li><a href=" mailto:[email protected]" class="chat_animation"> <i class="ticon-chat-sms" aria-hidden="true" title="Gửi Email"></i> Gửi Email</a> </li> <li class="to-top-pc"> <a href="#top" rel="nofollow"> <i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i> </a> </li> </ul> </div>

<style>

.phone-mobile {display: none;} .minhweb-nav { position: fixed; right: 15px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .minhweb-nav ul {list-style: none;padding: 0;margin: 0;} .minhweb-nav ul li {list-style: none!important;} .minhweb-nav ul>li a { border:none; padding: 3px; display: block; border-radius: 5px; text-align: center; font-size: 10px; line-height: 15px; color: #515151; font-weight: 700; max-width: 72.19px; max-height: 54px; text-decoration: none; } .minhweb-nav ul>li .chat_animation{display:none} .minhweb-nav ul>li a i.ticon-heart { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .minhweb-nav ul>li a i.ticon-zalo-circle2 { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-zalo.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav li .button { background: transparent; }.minhweb-nav ul>li a i.ticon-angle-up { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-angle-up.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav ul>li a i { width: 33px; height: 33px; display: block; margin: auto; }.minhweb-nav ul li .button .btn_phone_txt { position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .minhweb-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.minhweb-nav ul>li a.chat_animation svg { margin: -13px 0 -20px; } .minhweb-nav ul>li a i.ticon-messenger { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-messenger.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.minhweb-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .minhweb-nav ul>li a i.ticon-chat-sms { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-sms.png) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .minhweb-nav ul>li a i.icon-phone-w { background: url(//copphaviet.com/wp-content/uploads/2020/05/wpfast-icon-phone.png) no-repeat; background-size: contain;} .minhweb-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .minhweb-nav li .chat_animation{display:block !Important} .minhweb-nav li .button .phone_animation {box-shadow: none; position: absolute; top: -16px; left: 50%; transform: translate(-50%,0); width: 50px; height: 50px; border-radius: 100%; background: #6cb917; line-height: 15px; border: 2px solid white; } .minhweb-nav ul>li a{padding:0; margin:0 auto} .minhweb-nav { background: white; width: 100%; border-radius:0; color: #fff; height: 60px; line-height: 50px; position: fixed; bottom: 0; left: 0; z-index: 999; padding: 5px; margin: 0; box-shadow: 0 4px 10px 0 #000; } .minhweb-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} .rung {animation: code-pro-rung-lac 1s ease infinite;}@-webkit-keyframes code-pro-rung-lac { 0% {-webkit-transform: rotate(0) scale(1) skew(1deg);}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);} 20%{-webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% {-webkit-transform: rotate(-25deg) scale(1)skew(1deg);} 40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}100% {-webkit-transform: rotate(0) scale(1) skew(1deg); }}

</style>

Trong code mình đã tách các button ra cho các bạn dễ nhìn. Các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

Mẫu 6:

Xem demo bên dưới hoặc xem

Code:

Mẫu này, nút sẽ nằm ở giữa bên trái màn hình, chạy ra khi rê chuột vào. Sử dụng mẫu này, các bạn copy toàn bộ code bên dưới dán vào bố cục -> tiện ích HTML/JavaScript

<div>

<div>

<h3 class="text-center">Hãy liên hệ ngay với chúng tôi để được tư vấn miễn phí</h3>

</div>

</div>

<div><span>Email: [email protected]</span></div>

</div>

<div>

<p>Chat trực tuyến với NTLRUBY</p>

</div>

</a>

</div>

<div>

<p>NTLRUBY sẽ phản hồi ngay khi nhận được yêu cầu</p>

</div>

</a>

</div>

</div>

<style>

.flex{display:-ms-flexbox;display:-webkit-flex;display:flex}.align-center{-webkit-align-items:center;align-items:center}

.flex-align{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}

.flex-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center}

.text-center{text-align:center}

.w-50{float:left;width:50%}

.zalo-icon:before,.contact-icon:before{content:"";display:inline-block;vertical-align:middle;width:48px;height:48px;background-position:center center;background-repeat:no-repeat}

.zalo-icon:before{background-color:#018fe5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23fff' d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");background-size:55%}

.contact-icon:before{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.41.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E);background-color:#00aeef;background-size:43%}

.contact-module{position:fixed;top:50%;left:-450px;transform:translate(-0%,-50%);max-width:480px;z-index:20;transition:left .7s}

.contact-module:hover{left:0}

.contact-module-content{background:#fff;padding:20px;border-radius:0 4px 4px 0;box-shadow:rgba(0,0,0,0.3) 0 0 6px,rgba(0,0,0,0.15) 0 1px 6px}

.contact-module-content>div>div:nth-of-type(1){margin-bottom:20px}

.contact-module-content>div>div:nth-of-type(2){background:#dadce0;opacity:.7;padding:10px;border-radius:4px}

.contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2){width:2px;background:#00aeef;margin:0 10px}

.contact-text-wrapper h3{line-height:1.5;opacity:.8;text-transform:uppercase;cursor:default}

.contact-module-content a{color:#212529}

.contact-module-title{background:#00aeef;border:1px solid #00aeef;border-radius:0 4px 4px 0;color:#fff;width:30px;height:100px}

.contact-module-title>div{transform:rotate(-90deg);white-space:nowrap;letter-spacing:3px;font-size:90%;font-weight:500}

.contact-module-content .has-icon{width:48px;height:48px;border-radius:50%;overflow:hidden}

.contact-set a>div:nth-of-type(2){line-height:1.4}.contact-set h4{margin-bottom:5px}

.contact-text-wrapper>div:nth-of-type(3){line-height:1.6}

.contact-text-wrapper>div:nth-of-type(3) a{font-size:1.2rem;font-weight:500}

.contact-text-wrapper>div:nth-of-type(3) a+span{font-size:1.4rem;opacity:.7}

.is-divider{display:block;margin: .7em 0 .5em;background:rgba(0,0,0,0.1);width:100%;max-width:50px;height:2px}

@media(min-width:1025px){.contact-module-title{cursor:pointer}}

@media(max-width:480px){.contact-module{display:none!important}}

</style>

Trong đó các bạn nhớ thay các thông tin của các bạn vào những chỗ tô vàng.

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

6 mẫu nút liên hệ tích hợp đẹp cho Blogspot

"Goi ngay"

"Chát Zalo"

"Messenger"

Mẫu 1:

Mẫu 2:

Mẫu 3:

Mẫu 4:

Mẫu 5:

Mẫu 6:

NTLRUBY

Bài Viết Liên Quan

Không có nhận xét nào :

Đăng nhận xét

Được Xem Nhiều Nhất

Facebook Page

Recent Comments

6 mẫu nút liên hệ tích hợp đẹp cho Blogspot

"Goi ngay"

"Chát Zalo"

"Messenger"

Mẫu 1:

Mẫu 2:

Mẫu 3:

Mẫu 4:

Mẫu 5:

Mẫu 6:

NTLRUBY

Bài Viết Liên Quan

Có thể bạn thích:

Không có nhận xét nào :

Đăng nhận xét

Được Xem Nhiều Nhất

Facebook Page

Recent Comments