Chuyên mục

Blogger
  • Phần mềm 1
    • Thủ thuật điện thoại / ipad 1
      • Thủ Thuật hay 2
        • Thủ thuật Internet 1
          • Thủ thuật windows 1
            Bảo hiểm
            • Quyền lợi và nghĩa vụ 1
              • Tôi yêu bảo hiểm 1
                • Ý nghĩa bảo hiểm 1

                  Thêm các button liên hệ cực chất cho blogspot


                  Nay có dịp đọc bài viết của anh bạn vô tình thấy mấy cái button chat facebook, telegram đẹp quá, vốn tính tò mò nên thử soi code xem thử trang wordpress của anh ta tự thiết kế button hay dùng plugin mới biết anh ta sử dụng plugin của trang whatshelp. Truy cập trang này mình thấy ngoài các button ở trên trang này còn cung cấp nhiều button khác như: viber, sms, email, line...thế là mình quyết định mượn css của trang này về dùng tạm 😁😁😁

                  Các bạn lưu ý: mình chỉ lấy css của button thôi nhá, nghĩa là button kèm link ngoài ra chả có tính năng gì khác đâu. Nếu bạn thấy đẹp thì cũng lấy về mà dùng, dưới đây là cách thực hiện:

                  Đầu tiên các bạn thêm link css của button vào trước thẻ
                  <link href='https://cdn.phuongmy.blog/css/contact-button-widget.css' rel='stylesheet'/>
                  

                  Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng
                  <!--Contact Button Widget-->
                  <div class='wh-widget-send-button-desktop'>
                    <div class='wh-widget-send-button-wrapper wh-widget-right'>
                      <div class='wh-widget-hello-popup-wrapper wh-popup-right wh-hide popup-slide popup-slide-in'>
                        <div class='wh-widget-hello-popup'>
                          <div class='wh-widget-hello-popup-close'>
                            <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                              <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path>
                              <path d='M0 0h24v24H0z' fill='none'></path>
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div class='wh-animation-in' id='wh-call-to-action' style='top: 29px;'>
                        <a href='javascript:void(0)' title=''>
                          <div class='wh-call-to-action-content'>Liên hệ hỗ trợ 24/7</div>
                        </a>
                      </div>
                      <div class='wh-widget-send-button-wrapper-list'>
                        
                  <!--Các button liên hệ đặt tại đây-->
                        <a class='wh-widget-button wh-widget-button-activator' href='javascript:void(0);'>
                          <div class='wh-widget-button-icon wh-messenger-bg-activator' style='background-color:#129BF4;'>
                            <div>
                              <svg class='wh-messenger-svg-close wh-svg-close' viewBox='-9 -10 41 44' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                                <path d=' M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill-rule='evenodd'></path>
                              </svg>
                              <i class='wh-icon-whatshelp wh-svg-icon'></i>
                            </div>
                          </div>
                          <div class='clear'></div>
                        </a>
                      </div>
                      <div class='clear'></div>
                    </div>
                  </div>
                  <script>//<![CDATA[
                  $('.wh-messenger-bg-activator').on('click', function() {
                    $(this).parent().parent().toggleClass('wh-widget-show-get-button wh-widget-activator-as-close wh-widget-activate');
                    var call_to_action = $(this).parent().parent().parent().find('#wh-call-to-action');
                    var widget_button = $(this).parent().parent().find('.wh-widget-button');
                    if ($(call_to_action).hasClass('wh-animation-in')) {
                      $(call_to_action).removeClass('wh-animation-in').addClass('wh-animation-out wh-hide');
                    } else {
                      $(call_to_action).addClass('wh-animation-in').removeClass('wh-animation-out wh-hide');
                    }
                    if ($(widget_button).not('.wh-widget-button-activator').hasClass('button-slide-out')) {
                      $(widget_button).not('.wh-widget-button-activator').removeClass('button-slide-out').addClass('button-slide');
                    } else {
                      $(widget_button).not('.wh-widget-button-activator').addClass('button-slide-out').removeClass('button-slide');
                    }
                  });
                  //]]></script>
                  <!--/Contact Button Widget-->

                  Thêm các button liên hệ cực chất cho blogspot
                  Các bạn thay thành các button dưới đây tùy thích, nhớ thêm link vào mỗi button các bạn nhé.
                  + Facebook
                  <a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>
                    <div class='wh-widget-button-icon wh-messenger-bg-facebook'>
                      <div>
                        <svg class='wh-messenger-svg-facebook wh-svg-icon' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                          <path d=' M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill-rule='evenodd'></path>
                        </svg>
                      </div>
                    </div>
                    <div class='mes-us'>Facebook Messenger</div>
                    <div class='clear'></div>
                  </a>

                  + Zalo :
                  <a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>
                  
                    <div class='wh-widget-button-icon wh-messenger-bg-zalo'>
                      <div>
                        <svg class='wh-messenger-svg-zalo wh-svg-icon' viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                          <path 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'></path>
                  
                          <path 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'></path>
                  
                          <path 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'></path>
                  
                        </svg>
                  
                      </div>
                  
                    </div>
                  
                    <div class='mes-us'>Zalo Chat</div>
                  
                    <div class='clear'></div>
                  
                  </a>

                  + Phone :
                  <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
                  
                    <div class='wh-widget-button-icon wh-messenger-bg-call'>
                  
                      <div>
                  
                        <svg class="wh-messenger-icon wh-messenger-bg-call" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-72 -72 704 704">
                  
                          <path d=" M166.156,512h-41.531c-7.375-0.031-20.563-8.563-20.938-8.906C37.438,437.969,0,348.906,0,255.938 C0,162.719,37.656,73.375,104.281,8.219C104.313,8.188,117.25,0,124.625,0h41.531c15.219,0,33.25,11.125,40.063,24.781l2.906,5.844 c6.781,13.594,6.188,35.563-1.344,48.75l-27.906,48.813c-7.563,13.219-26.188,24.25-41.406,24.25H110.75 c-36.813,64-36.813,143.094-0.031,207.125h27.75c15.219,0,33.844,11.031,41.406,24.25l27.875,48.813 c7.531,13.188,8.156,35.094,1.375,48.781l-2.906,5.844C199.375,500.844,181.375,512,166.156,512z M512,128v256 c0,35.344-28.656,64-64,64H244.688c-1.25-11.219-3.969-22.156-9.156-31.25l-27.875-48.813 c-13.406-23.406-42.469-40.375-69.188-40.375h-8.156c-20.188-45.438-20.188-97.719,0-143.125h8.156 c26.719,0,55.781-16.969,69.188-40.375l27.906-48.813c5.188-9.094,7.906-20.063,9.156-31.25H448C483.344,64,512,92.656,512,128z M328,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S328,381.25,328,368z M328,304c0-13.25-10.75-24-24-24 s-24,10.75-24,24s10.75,24,24,24S328,317.25,328,304z M328,240c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24 S328,253.25,328,240z M392,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,381.25,392,368z M392,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,317.25,392,304z M392,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S392,253.25,392,240z M456,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,381.25,456,368z M456,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,317.25,456,304z M456,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S456,253.25,456,240z M456,144c0-8.844-7.156-16-16-16H296c-8.844,0-16,7.156-16,16v32c0,8.844,7.156,16,16,16h144 c8.844,0,16-7.156,16-16V144z" fill-rule="evenodd"></path>
                  
                        </svg>
                  
                      </div>
                  
                    </div>
                  
                    <div class='mes-us'>Call now</div>
                  
                    <div class='clear'></div>
                  
                  </a>

                  +SMS
                  <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
                  
                    <div class='wh-widget-button-icon wh-messenger-bg-sms'>
                  
                      <div>
                  
                        <svg class='wh-messenger-icon wh-messenger-bg-sms' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                  
                          <path d='M21 23h4.01c1.1 0 1.99-.893 1.99-1.994V8.994C27 7.894 26.11 7 25.01 7H6.99C5.89 7 5 7.893 5 8.994v12.012C5 22.106 5.89 23 6.99 23h9.566l3.114 3.504c.73.82 1.33.602 1.33-.5V23zM10.515 12.165c.36.11.682.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.536.054-.707.16a.512.512 0 0 0-.256.46c0 .173.055.32.167.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .292-.528.618.618 0 0 0-.174-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.127-.202.38 0 .75.055 1.11.165zm7.732 5.8l-.01-4.424-1.87 3.806h-.653l-1.867-3.805v4.426h-.942V12.04h1.186l1.955 3.938 1.945-3.937h1.178v5.926h-.92zm5.728-5.8c.36.11.68.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.537.054-.707.16a.512.512 0 0 0-.257.46c0 .173.056.32.168.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .29-.528.618.618 0 0 0-.172-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.126-.202.38 0 .75.055 1.112.165z' fill-rule='evenodd'></path>
                  
                        </svg>
                  
                      </div>
                  
                    </div>
                  
                    <div class='mes-us'>Send SMS</div>
                  
                    <div class='clear'></div>
                  
                  </a>

                  + Email :
                  <a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
                  
                    <div class='wh-widget-button-icon wh-messenger-bg-email'>
                  
                      <div>
                  
                        <svg class="wh-messenger-icon wh-messenger-bg-email" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  
                          <path d=" M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z" fill-rule="evenodd"></path><path d=" M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z" fill-rule="evenodd"></path>
                  
                         </svg>
                  
                      </div>
                  
                    </div>
                  
                    <div class='mes-us'>Gửi Email</div>
                  
                    <div class='clear'></div>
                  
                  </a>
                  Lưu ý: Đoạn script ở trên mình viết bằng jquery nên template cần có link thư viện jquery các bạn nhé. Ngoài ra đoạn code ở trên mặc định button sẽ nằm bên phải, nếu các muốn nằm bên trái thì thay tất cả các class "wh-widget-right" trong code trên thành "wh-widget-left" là nó sẽ nằm ở bên trái thôi.
                  Nội dung chính
                    Bài đăng cũ hơn