Bộ nút liên hệ + mạng xã hội + shop cố định + nút đẹp

 Chia sẻ bộ nút liên hệ mạng xã hội cố định, fixed social network của Facebook, zalo, instagram, messenger, tiktok, tiki, shopee, youtube... bạn có thể thêm sửa dễ dàng. Phù hợp với các blogspot hoặc blogger bán hàng, tư vấn dịch vụ rất cần thiết.

Các bước cài đặt rất đơn giản, bạn chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

<style>
  /*<![CDATA[*/
#fixed-social-network{position:fixed;top:25%;right:-100px;z-index:9}#fixed-social-network > a{display:flex;align-items:center;border-radius:4px;height:40px;padding:5px;width:140px;transform:translateX(0px);background:#fff;color:#222;border:1px solid #e1e1e1;margin-bottom:7px;transition:all 0.4s ease-in-out}#fixed-social-network > a:hover{transform:translateX(-100px)}#fixed-social-network > a span{display:block;width:30px;height:30px;margin-right:10px}#fixed-social-network > a.zalo-icon span{background-position:-80px -43px;background-size:500%}#fixed-social-network > a.messenger-icon span{background-position:-39px 3px;background-size:500%}#fixed-social-network > a.youtube-icon span{background-position:-80px 4px;background-size:500%}#fixed-social-network > a.instagram-icon span{background-position:3px 3px;background-size:500%}#fixed-social-network > a.tiktok-icon span{background-position:-38px -43px;background-size:500%}#fixed-social-network > a.tiki-icon span{background-position:-123px -43px;background-size:500%}#fixed-social-network > a.shopee-icon span{background-position:2px -47px;background-size:540%}#fixed-social-network > a#back-to-top{background:#144d84;color:#fff}#fixed-social-network > a img{max-height:100%;margin-right:15px}.img-fluid{max-width:100%;height:auto}
  /*]]>*/
</style>
<div id="fixed-social-network" class="d-none d-sm-block">
  <a href="https://zalo.me/" class="zalo-icon" target="_blank">
    <img class="img-fluid" alt="Icon-Zalo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjana7N3ZyYi38wm_oqJcustsbJXj72EtD9YecZi3gH-w5f5rIM1sf4Bp5ZeQbu3kFkODMVEP_vlBMUWBGaMe3vYs7cTjuVpPjAilGwGzfzzXgRjpT0E10xzQGTxbLygT107RgxsQGr472P/h120/zalo.png" /> Zalo
  </a>
  <a href="https://www.facebook.com/" class="messenger-icon" target="_blank">
    <img class="img-fluid" alt="Icon-Messager" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qVOLufW2Wmd8Lx_KrvAVuIkwjws1h-cjTnRT6WLgyn9DsarImWe9SKmkm9uglBC_BT_lfAEOFXB507q3WMJ1l1xjWjRWmwGNgxh5Vz5SVVUl9HDv-QMp7hToZ_OBaQKY-ySBfhqTNIZe/h120/Messager.png" /> Messenger
  </a>
  <a href="https://www.youtube.com/" target="_blank">
    <img class="img-fluid" alt="Icon-Youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFz2WVzu_Lh19fqndzkVlgKnbXSLjmM__ceNp25xzTAvcG4HjdlviAOG19nVQAPttq5wSAeWWpeHF7y2-GNzKAsybrYYGseV084kqdaOQIYyKiwVAFWYE6WNPyQNjo_ghnKi6lw_i4ZSpx/h120/youtube.png" /> Youtube
  </a>
  <a href="https://www.instagram.com/" target="_blank">
    <img class="img-fluid" alt="Icon-Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVnA8N42JQOg4MD8zpdTVYNlBrgCUW9aZBKOtBfdHyFGhrUlvQqX37J5uBz6ffhUrMhhivj9gDSf8tPnFX9fjtpDdCUKZvfLnvjaDvhGv6f3bbR8eXJrK7EcUCdapuZKskglKfJ7g1XT3/h120/Instagram.png" /> Instagram
  </a>
  <a href="https://tiki.vn/" target="_blank">
    <img class="img-fluid" alt="Icon-Tiki" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOkjCapq4AOiWa0Yu6ZYX7KIHff3Rt4_18oHk_tqlu7dyL32AI-pI0re6Bh4Z4-1NlNl9vA3cOk8ckH_b69uiYpMzXw-jXF_MgtxtJ0G1Qy8tbhzct8QxYl8fdpahCRrn1gL_9oGsb3bO/h120/tiki.webp" /> Tiki
  </a>
  <a href="https://www.tiktok.com/vi-VN" target="_blank">
    <img class="img-fluid" alt="Icon-Tiktok" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnN7XgKRliyFa1de59-r630FCXsA3PkxnR_fxMIgdg_04n_1kFlGoxZSfSJjBvE5UbIk0rs7oOg5BnMAShq9IJeZWejHRy1LDVdO0LVxP3J1fGR1-4uyBbcvYtP7FGgISi4UmxB06rditm/h120/tiktok.png" /> Tiktok
  </a>
  <a href="https://shopee.vn/" target="_blank">
    <img class="img-fluid" alt="Icon-Shopee" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJI8NRyRaU0OUFtf6bMcCaWNNt8c9Qlq6rhpLfLgxdQx7qgiMiPfKQW0im98Q9pEi8aYqby_kvaH3yxP92mjn8GXn8uHOJYiam6F1xWA4sYDssW22MBrA8I6lz9NIwIvcEpwAsEhIFd7aS/h120/Shopee.png" /> Shopee
  </a>
</div>

Chúc bạn thành công.

Xem thêm:

* Nút liên hệ cố định đẹp.

* Bài viết về website - Blog

Code Blog

CODE Gửi Email cho Google Sheet

Tạo 1 file Google Forms để nhập liệu --> qua Tab Câu trả lời để tạo file Google Sheet

Bạn có thể bấm vào biểu tượng hình con mắt để xem Form chạy (Form nhập liệu) nhấn Ctrl + U (Xem nguồn trang) để lấy mã số các đối tượng nhập qua code của Website.

Mở Google Sheet -> Công cụ -> Trình chỉnh sửa tập lệnh -> Trong phần Mã.gs thay bằng đoạn Code bên dưới

function guiBieuMau(e) {

    var email = "gmailcuaban@gmail.com";

    var subject = "Đơn đặt hàng";

    var s = SpreadsheetApp.getActiveSheet();

    var columns = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];

    var message = "";

    for (var keys in columns) {

        var key = columns[keys];

        if (e.namedValues[key] && (e.namedValues[key] != "")) {

            message += key + ' :: ' + e.namedValues[key] + "\n\n";

        }

    }

    MailApp.sendEmail(email, subject, message);

}

Tiện ích liên hệ đẹp cho blogspot bao gồm: Nút gọi điện thoại, Zalo, Messenger, SMS, Maps.

Cách cài đặt các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

<style> .phone-mobile {display: none;} .giuseart-nav { position: fixed; left: 13px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .giuseart-nav ul {list-style: none;padding: 0;margin: 0;} .giuseart-nav ul li {list-style: none!important;} .giuseart-nav ul&gt;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; } .giuseart-nav ul&gt;li .chat_animation{display:none} .giuseart-nav ul&gt;li a i.ticon-heart { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .giuseart-nav ul&gt;li a i.ticon-zalo-circle2 { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-zalo-circle2.png.pagespeed.ce_.iUc59tfITH.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav li .button { background: transparent; }.giuseart-nav ul&gt;li a i.ticon-angle-up { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-angle-up.png.pagespeed.ce_.NGU5VowWiC.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav ul&gt;li a i { width: 33px; height: 33px; display: block; margin: auto; }.giuseart-nav ul li .button .btn_phone_txt { position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .giuseart-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.giuseart-nav ul&gt;li a.chat_animation svg { margin: -13px 0 -20px; } .giuseart-nav ul&gt;li a i.ticon-messenger { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-messenger.png.pagespeed.ce_.sSebhnGGgP.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .giuseart-nav ul&gt;li a i.ticon-chat-sms { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-sms-1.jpg) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .giuseart-nav ul&gt;li a i.icon-phone-w { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-phone-w.png) no-repeat; background-size: contain;} .giuseart-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .giuseart-nav li .chat_animation{display:block !Important} .giuseart-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; } .giuseart-nav ul&gt;li a{padding:0; margin:0 auto} .giuseart-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; } .giuseart-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} </style> <div class='giuseart-nav'> <ul> <li><a href='https://g.page/NhThang?share' rel='nofollow' target='_blank'><i class='ticon-heart'/>Tìm đường</a></li> <li><a href='https://zalo.me/0978099792' rel='nofollow' target='_blank'><i class='ticon-zalo-circle2'/>Chat Zalo</a></li> <li class='phone-mobile'> <a class='button' href='tel:0978099792' rel='nofollow'> <span class='phone_animation animation-shadow'> <i aria-hidden='true' class='icon-phone-w'/> </span> <span class='btn_phone_txt'>Gọi điện</span> </a> </li> <li><a href='https://www.messenger.com/t/nhthang.phattrientuduy' rel='nofollow' target='_blank'><i class='ticon-messenger'/>Messenger</a></li> <li><a class='chat_animation' href='sms:0978099792'> <i aria-hidden='true' class='ticon-chat-sms' title='Nhắn tin sms'/> Nhắn tin SMS</a> </li> <li class='to-top-pc'> <a href='#' rel='nofollow'> <i aria-hidden='true' class='ticon-angle-up' title='Quay lên trên'/> </a> </li> </ul> </div>