Hướng dẫn cách tạo Subdomain cho blogspot

LongAnIT 9/10/2019 Bình luận
Hello! Xin chào các bạn. Đã lâu không viết bài về thủ thuật blogspot. Hôm nay tìm kiếm trên google thấy anh em công đồng blogger có chia sẻ một template bán hàng khá đẹp nên ý định tạo ra một tiên miền phụ (subdomain) để tạo một trang web bán hàng.

Hướng dẫn cách tạo Subdomain cho blogspot
Tạo subdomain(tên miền phụ) cho blogspot

 Việc tạo subdomain cho blogspot cực kỳ đơn giản, và bạn có thể tạo rất nhiều subdomain hay tên miền phụ mà không bị giới hạn và có thể tạo cả ngàn subdomain đó nha. Blogger thật tuyệt vời đúng không nào. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách để chúng ta tạo và add subdomain vào tên miền blogspot.

1. Tên miền phụ hay subdomain là gì?

Tên miền phụ hay subdomain có thể được ví dụ như sau. Ví dụ longanit có tên miền chính là www.longanit.com và giờ longanit sẽ tạo một website khác, nhưng ở cùng trên tên miền longanit.com thì sẽ tạo một tên miền dạng subdomain.abc.com. Như trong bài viết thì tôi tạo một subdomain có tên là shop.longanit.com

2. Cách tạo subdomain cho blogspot?

Bước 1:  Thêm IPCNAME vào quản trị DNS tên miền

Bước này thật sự không khác gì là bước chúng ta cài đặt tên miền cho blogspot mới mà tôi đã có bài hướng dẫn trước đây. Các bạn tham khảo cách cài đặt tên miền riêng cho blogspot ở link dưới đây nhé
https://www.longanit.com/2019/05/huong-dan-cai-dat-ten-mien-rieng-cho-blogspot.html
Đầu tiên bạn đăng nhập vào quản trị tên miền của bạn. Mỗi Cpanel của trang quản trị sẽ có giao diện khác nhau chút xíu. Tuy nhiên về cơ bản các tính năng của một trang quản trị tên miền là khá giống nhau. Bây giờ tôi bắt đầu tạo add tên miền phụ ví dụ tôi đặt tên miền phụ là shop thì tôi sẽ khai báo nó như sau:

Hướng dẫn cách tạo sub domain tại trang quản trị tên miền
Hướng dẫn cách tạo sub domain tại trang quản trị tên miền

Tại trang quản lý DNS của tên miền tôi thêm 01 bản ghi CNAME với giá trị như trên hình

  • Host: shop (tên miền phụ)
  • Loại giá trị: CNAME 
  • Giá trị: ghs.google.com
Sau khi tạo xong nếu hoàn thành thì tôi sẽ có một tên miền phụ với tên như sau: shop.longanit.com. Để kiểm tra các bạn có thể ping nó từ CMD

Kiểm tra ip của subdomain sau khi tạo xon
Kiểm tra ip của subdomain sau khi tạo xong

Bạn có thể nhìn thấy trên màn hình với tên miền phụ thì ip của nó khác với ip của tên miền chính như vậy là bạn đã hoàn thành bước số 1 là tạo xong subdomain.

Bước 2: Bạn tạo một blog mới sau đó tiến hành add tên miền này vào là xong nhé. Các bước tiến hành cũng giống như bài hướng dẫn trước nó chỉ khác là lần này bạn không chọn chuyển hướng nhé.

Hoàn thành add tên miền phụ vào cho blogspot
Hoàn thành add tên miền phụ vào cho blogspot


Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

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

LongAnIT 9/04/2019 Bình luận
Dạo qua một số trang thủ thuật blogger thấy code này hay nên muốn chia sẻ với anh em nào có nhu cầu sử dụng. Code này sử dụng plugin của trang whatshelp lấy ra nó có thể sử dụng cho blogspot rất đơn giản nhằm làm đẹp cho blogspot của bạn giúp tiếp cận với nhiều khách hàng nếu như bạn sử dụng website bán hàng hay giới thiệu sản phẩm.
Thêm các button liên hệ cực chất cho blogspot
Thêm các button liên hệ cực chất cho blogspot

Đầu tiên các bạn thêm link css của button vào trước thẻ Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng

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. 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ẻ </head>

<link href='https://vietblogdao.github.io/css/contact-button-widget.css' rel='stylesheet'/>

Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng </body>
<!--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-->

Các biểu tượng icon sau khi thêm code vào
Các biểu tượng icon sau khi thêm code vào


Các bạn thay <!--Các button liên hệ đặt tại đây--> 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>
+ Viber
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-viber'>
    <div>
      <svg class='wh-messenger-icon wh-messenger-bg-viber' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d=' M21.176 27c-.208-.062-.618-.13-.987-.303-6.476-3.02-11.18-7.972-13.853-15.082-.897-2.383.04-4.396 2.298-5.22.405-.147.802-.157 1.2.002.964.383 3.404 4.022 3.458 5.11.042.835-.48 1.287-1 1.67-.983.722-.988 1.638-.568 2.66.948 2.308 2.567 3.895 4.663 4.925.76.374 1.488.337 2.007-.515.925-1.518 2.06-1.445 3.3-.502.62.473 1.253.936 1.844 1.45.8.702 1.816 1.285 1.336 2.754-.5 1.527-2.226 3.066-3.7 3.05zm-4.76-20.986c4.546.166 8.46 4.677 8.406 9.543-.005.478.153 1.185-.504 1.172-.628-.015-.464-.733-.52-1.21-.603-5.167-2.786-7.606-7.52-8.394-.392-.066-.99.026-.96-.535.044-.833.754-.523 1.097-.576zm6.072 8.672c-.045.356.147.968-.385 1.056-.72.118-.58-.595-.65-1.053-.48-3.144-1.5-4.297-4.423-5.005-.43-.105-1.1-.032-.99-.75.108-.685.71-.452 1.164-.393 2.92.38 5.307 3.126 5.284 6.144zm-2.222-.573c.013.398-.026.818-.46.874-.314.04-.52-.245-.553-.597-.12-1.296-.75-2.062-1.95-2.27-.36-.063-.712-.19-.544-.715.11-.352.408-.387.712-.396 1.297-.036 2.815 1.647 2.794 3.103z' fill-rule='evenodd'></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Call Viber</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>
 + Whatsapp
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-whatsapp'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-whatsapp" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Whatsapp</div>
  <div class='clear'></div>
</a>
 + Snapchat
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-snapchat'>
    <div>
      <svg  class="wh-messenger-icon wh-messenger-bg-snapchat" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d=" m 254.23192,67.745656 c -24.1553,0.16536 -49.1333,6.57616 -68.7188,22.0625 -14.667,11.577654 -26.19916,26.921164 -33.46871,44.062504 -0.0109,0.0415 -0.0213,0.0832 -0.0312,0.125 -6.92358,17.66206 -6.28241,36.45908 -5.34375,53.875 4.9e-4,0.0106 -4.9e-4,0.0207 0,0.0312 0.57046,12.24111 1.9192,24.09182 0.78125,35.34375 -0.0919,0.43802 -0.096,0.54776 -0.15625,0.8125 -5.44516,0.98701 -11.372,0.62902 -17.25,-0.5 -0.0312,-2.9e-4 -0.0625,-2.9e-4 -0.0937,0 -4.02639,-0.69306 -8.32797,-2.35229 -13.1875,-3.71875 -0.0828,-0.023 -0.16615,-0.0438 -0.25,-0.0625 -4.71633,-1.07824 -9.35242,0.29501 -12.90625,2.9375 -0.0457,0.0296 -0.10985,0.0635 -0.15625,0.0937 -0.071,0.054 -0.14865,0.10124 -0.21875,0.15625 -2.89265,1.9156 -6.854978,5.13197 -7.062498,10.71875 -0.009,0.36655 0.0225,0.73407 0.0937,1.09375 0.62464,3.28299 2.64407,5.68343 4.437498,7.25 1.79342,1.56657 3.48778,2.60119 4.53125,3.40625 0.0814,0.0651 0.16474,0.12762 0.25,0.1875 8.79695,5.93514 18.53281,8.54299 27,11.84375 0.009,0.003 0.0225,-0.003 0.0312,0 5.86205,2.59731 10.95592,6.63609 12.125,11.71875 1.45977,6.42713 -1.2468,13.80558 -4.78125,20.96875 -0.004,0.009 0.004,0.0226 0,0.0312 -9.53334,18.98565 -23.69089,35.49609 -41.093748,47.59375 -9.12374,6.29511 -19.416525,10.9945 -30.156305,13.9064 -0.148149,0.0453 -0.294192,0.0974 -0.4375,0.15625 -2.20374,0.82986 -7.42924,1.37247 -10.71875,6.375 -0.233793,0.34937 -0.423282,0.72835 -0.5625,1.125 -1.10923,3.2168 0.1562,6.67058 1.71875,8.5625 1.4921,1.80662 3.15667,2.85786 4.59375,3.625 0.0735,0.043 0.1451,0.0824 0.21875,0.125 9.04276,5.22608 18.918595,7.49157 27.937505,9.8125 0.0415,0.0109 0.0832,0.0213 0.125,0.0312 6.4981,1.47977 12.488738,2.27029 17.374998,4.375 0.23923,0.40234 0.72852,2.05832 1.875,4.8125 1.60151,4.99968 2.32952,10.9037 4.1875,17.09375 0.50804,1.71342 2.00225,3.09556 3.75,3.46875 4.104,0.87193 6.36119,-0.53617 6.71875,-0.5625 0.16758,-0.0124 0.33452,-0.0333 0.5,-0.0625 15.10019,-2.6468 30.16835,-4.99383 43.99996,-1.5 0.01,0.003 0.021,-0.003 0.031,0 14.516,3.82363 27.1309,13.91446 41.3438,22.59375 0.025,0.0154 0.037,0.0471 0.062,0.0625 l 0,-0.0312 c 9.4342,5.98646 20.3393,11.8485 32.9375,12.28125 l 0,0.0312 c 0.042,10e-4 0.083,-10e-4 0.125,0 9.5155,0.53896 18.855,-0.0657 27.9687,-0.6875 0.0521,8.1e-4 0.1042,8.1e-4 0.1563,0 7.8038,-0.77302 15.3807,-3.37002 22,-7.625 0.094,-0.0535 0.1876,-0.10258 0.2812,-0.15625 14.9452,-8.56344 28.2258,-18.88234 42.7813,-25.34375 0.021,-0.008 0.042,-0.0237 0.062,-0.0312 4.7208,-1.71157 10.6189,-1.61506 17.1875,-2.0625 0.062,-0.002 0.125,0.002 0.1875,0 12.0527,-0.3721 24.1283,0.27414 36.0937,1.875 0.41448,0.0522 0.83552,0.0522 1.25,0 1.5714,-0.1864 3.2889,-1.24155 4.125,-2.3125 0.8361,-1.07095 1.077,-1.94318 1.25,-2.5625 0.3462,-1.23864 0.667,-1.83102 0.094,-0.8125 0.1817,-0.31606 0.3287,-0.65205 0.4375,-1 2.1971,-7.28002 3.3925,-13.86797 6.9375,-17.96875 1.5929,-1.55716 4.334,-2.33886 7.4375,-2.28125 0.22952,0.005 0.45941,-0.005 0.6875,-0.0312 10.4024,-1.23133 19.8052,-4.98696 28.7188,-8.1875 0.10556,-0.0382 0.20984,-0.0799 0.3126,-0.12505 3.3113,-1.44341 8.2453,-3.09963 11.625,-7.84375 0.018,-0.0254 0.044,-0.0369 0.062,-0.0625 l -0.031,-0.0312 c 2.8428,-3.9725 1.523,-9.42469 -2.5,-11.90625 l 0.062,-0.0625 c -0.1275,-0.0867 -0.2474,-0.13595 -0.375,-0.21875 -0.034,-0.0186 -0.059,-0.0444 -0.094,-0.0625 l 0,0.0312 c -4.8259,-3.10006 -9.6612,-3.53092 -12.7187,-4.65625 -0.0621,-0.0221 -0.1246,-0.0429 -0.1875,-0.0625 -20.6872,-6.63568 -38.5778,-20.92111 -51.9375,-38.3125 -7.4172,-9.69129 -13.6899,-20.22202 -17.8438,-31.46875 -0.014,-0.041 -0.018,-0.084 -0.031,-0.125 -1.6262,-4.88353 -1.7077,-10.20902 0.6875,-13.4375 0.0317,-0.0308 0.0631,-0.062 0.094,-0.0937 3.7366,-5.36839 10.5935,-8.81878 17.9063,-11.53125 0.03,-0.0104 0.064,-0.0208 0.094,-0.0312 8.0819,-2.81157 16.9263,-6.08686 24.2187,-12.5625 0.0318,-0.0308 0.0631,-0.062 0.094,-0.0937 1.1283,-1.06695 2.4852,-2.45602 3.5,-4.53125 1.0149,-2.07523 1.4961,-5.31032 0.1563,-8.125 3e-5,-0.0104 3e-5,-0.0208 0,-0.0312 -2.1044,-4.33549 -5.774,-6.5662 -8.5,-8.1875 -0.0103,-3e-5 -0.0207,-3e-5 -0.031,0 -4.5673,-2.66592 -9.8816,-2.83887 -14.5,-1.34375 -0.01,0.003 -0.021,-0.003 -0.031,0 -0.031,0.0101 -0.063,0.021 -0.094,0.0312 -4.9892,1.51835 -9.0624,3.33391 -12.8438,3.8125 -0.0839,0.0187 -0.16722,0.0395 -0.25,0.0625 -5.3737,0.95777 -10.5773,1.18779 -14.625,-0.3125 -0.038,-0.60649 -0.057,-1.79013 -0.2187,-3.25 l 0.031,0 c -0.2988,-8.9153 0.4565,-18.10604 0.5937,-27.625 3e-4,-0.0212 -3e-4,-0.0413 0,-0.0625 0.4112,-14.46318 0.9948,-29.35295 -1.125,-44.34375 -0.009,-0.0731 -0.0191,-0.14607 -0.031,-0.21875 -4.6154,-25.28753 -20.687,-47.06736 -41.0625,-61.562504 -14.8121,-10.50987 -32.3972,-16.37581 -50.25,-18.03125 -0.01,-0.001 -0.021,0.001 -0.031,0 -5.9912,-0.60487 -11.9741,-0.81945 -17.9375,-0.75 z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Snapchat</div>
  <div class='clear'></div>
</a>
 + Telegram
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-telegram'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-telegram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
        <path d=" M15.02 20.814l9.31-12.48L9.554 17.24l1.92 6.42c.225.63.114.88.767.88l.344-5.22 2.436 1.494z" opacity=".6" fill-rule="evenodd"></path><path d=" M12.24 24.54c.504 0 .727-.234 1.008-.51l2.687-2.655-3.35-2.054-.344 5.22z" opacity=".3" fill-rule="evenodd"></path><path d=" M12.583 19.322l8.12 6.095c.926.52 1.595.25 1.826-.874l3.304-15.825c.338-1.378-.517-2.003-1.403-1.594L5.024 14.727c-1.325.54-1.317 1.29-.24 1.625l4.98 1.58 11.53-7.39c.543-.336 1.043-.156.633.214" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Send SMS</div>
  <div class='clear'></div>
</a>
 + Line
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-line'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Line</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.

Nguồn:Viet Blogger Design

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Shortcode HTML đẹp dành cho thiết kế nội dung

LongAnIT 8/27/2019 Bình luận
Shortcode HTML đẹp dành cho thiết kế nội dung
Shortcode HTML đẹp dành cho thiết kế nội dung


1. Button Thanh toán hoặc Chuyển Khoản

USD $15.00 Thanh toán bằng Paypal
250.000VNĐ Chuyển khoản ngân hàng

Code sử dụng
<div id="box-payment">
<div id="box-paypal">
<div class="cover-paypal">
<div class="icon-paypal">
<span class="coc"></span></div>
<div class="title-paypal">
<span class="app-title">USD $15.00</span>
<span class="label-paypal"><span class="tag-os"></span>Thanh toán bằng Paypal</span></div>
</div>
<div class="link-paypal">
<span class="item_price"><a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now"><span class="home-paypal">USD 9.00</span><span class="post-paypal">Thanh Toán</span></a></span></div>
</div>
<div id="box-bank">
<div class="bank-cover">
<div class="icon-bank">
<span class="coc"></span></div>
<div class="bank-title">
<span class="app-title">250.000VNĐ</span>
<span class="bank-grup"><span class="tag-os"></span>Chuyển khoản ngân hàng</span></div>
</div>
<div class="link-bank">
<a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now">Thanh Toán</a></div>
</div>
</div>
<style>
#box-payment{margin:0;-webkit-box-shadow:0 4px 13px -6px rgba(110,110,110,0);-moz-box-shadow:0 4px 13px -6px rgba(185,185,185,0.45);box-shadow:0 4px 13px -6px rgba(185,185,185,0.45)}
#box-bank,#box-paypal{box-sizing:border-box}
#box-bank,#box-bank .bank-cover .bank-title .tag-os,#box-paypal{overflow:hidden;vertical-align:middle}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .title-paypal,#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title{position:relative}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .icon-paypal span,#box-paypal .cover-paypal .title-paypal,#box-paypal .label-paypal,#box-paypal .link-paypal a{display:block}
#box-paypal .cover-paypal{float:left}
#box-paypal{padding:15px;margin:0;background:#dac8de}
#box-paypal .cover-paypal .icon-paypal,#box-bank .bank-cover .icon-bank{width:65px;height:65px;margin-right:20px;float:left;position:relative}
#box-paypal .cover-paypal .icon-paypal span,#box-bank .bank-cover .icon-bank span{background-size:100%;background-repeat:no-repeat;height:100%}
#box-paypal .cover-paypal .title-paypal,#box-bank .bank-cover .bank-title{vertical-align:middle;float:left;margin-top:5px}
#box-paypal .cover-paypal .title-paypal .label-paypal,#box-bank .bank-cover .bank-title .bank-grup{font-size:17px}
#box-paypal .cover-paypal .title-paypal .app-title{font-weight:700;color:#252525;font-size:133%}
#box-paypal .label-paypal a,#box-bank .bank-grup a{color:#666;font-size:12px}
#box-paypal .cover-paypal .title-paypal .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-paypal .link-paypal{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:rgba(255,193,7,1);background:-moz-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-webkit-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-o-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-ms-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);vertical-align:middle}
#box-paypal .link-paypal a{color:#fff}
.icon-paypal span.coc{background-image:url(https://1.bp.blogspot.com/-cBowlfjBRXo/XLGI-YJ7uEI/AAAAAAAAAIg/1FHgUQaXSJgVilohNPelpOLYJxTjDzPCACLcBGAs/s320/pay.png)}
#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title,#box-bank .bank-cover .icon-bank span,#box-bank .bank-grup,#box-bank .link-bank a{display:block}
#box-bank .bank-cover{float:left}
#box-bank{padding:15px;margin:0;color:#000;background:#fff}
#box-bank .bank-cover .bank-title .app-title{font-weight:700;font-size:133%}
#box-bank .bank-cover .bank-title .tag-os{display:inline-block;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-bank .link-bank{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:#d481ff;background:-moz-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-webkit-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-o-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-ms-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:linear-gradient(to right,#d481ff 0,#05f1e1 100%);vertical-align:middle}
#box-bank .link-bank a{color:#fff}
span.home-paypal{display:none}
.icon-bank span.coc{background-image:url(https://4.bp.blogspot.com/-_U1DUMM4rhQ/XLGHEbAayPI/AAAAAAAAAIM/IItPhixWuZQ0_hACgbI4DGQ4oiWE-OpqwCPcBGAYYCw/s320/bank.png)}
</style>

2. Bảng 3 cột

MỘT

  • Mục #1
  • Mục #2
  • Mục #3
  • Mục #4
  • Mục #5
  • Mục #6

KHÔNG

SỬ DỤNG

Code sử dụng
<div class="table_price">
<div class="plan featured1">
<div class="headtitle">
<h4 class="plan-title">
MỘT
</h4>
</div>
<ul class="plan-features">
<li>Mục #1</li>
<li>Mục #2</li>
<li>Mục #3</li>
<li>Mục #4</li>
<li>Mục #5</li>
<li>Mục #6</li>
</ul>
</div>
<div class="plan featured2">
<div class="headtitle">
<h4 class="plan-title">
KHÔNG</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
<div class="plan featured">
<div class="headtitle">
<h4 class="plan-title">
CÓ</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
</div>
<style>
.table_price{color:#000;text-align:center;font-size:16px;width:100%;display:-webkit-box;margin:15px 0 0}
.table_price .plan{margin:0;width:30%;position:relative;float:left;overflow:hidden}
.table_price .featured,.table_price .featured2{-webkit-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);-moz-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);z-index:1}
.table_price *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}
.table_price .headtitle{position:relative;color:#fff;padding:10px 0}
.table_price .featured1 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 161px 0;border-color:#3aadc3 transparent transparent;content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after,.table_price .featured2 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 123px 0;content:'';position:absolute;top:100%;left:50%}
.table_price .featured2 .headtitle:after{border-color:#38be85 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after{border-color:#f97c59 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured1 .plan-title,.table_price .featured2 .plan-title{top:0;margin:8px 0;text-transform:uppercase;font-weight:700;letter-spacing:1px;font-size:20px}
.table_price .featured .plan-title{top:0;margin:16px 0;text-transform:uppercase;font-weight:700;font-size:26px;letter-spacing:1px}
.table_price .plan-cost{margin:8px 0 0}
.table_price .plan-price{font-weight:800;font-size:2em;color:#fff}
.table_price .plan-type{opacity:.8;color:#fff;font-size:.7em;text-transform:uppercase}
.table_price .plan-features{padding:30px 0 0;margin:0;list-style:none;font-size:18px;color:#517177;background:#fff}
.table_price .featured .plan-features li,.table_price .featured1 .plan-features li,.table_price .featured2 .plan-features li{padding:15px 5%;font-weight:500}
.table_price .plan-features li:nth-child(even){background:rgba(0,0,0,.08)}
.table_price .plan-features i{margin-right:8px;opacity:.4}
.table_price .plan-select{padding:15px 5px;background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%);color:#fff;font-weight:400;font-size:18px}
.table_price .featured2 .plan-features li span:before{content:url(https://4.bp.blogspot.com/-VlKTf-UNl2c/XK3zzFNT_BI/AAAAAAAAAGM/YWfZrht9Yq8WXcO75Wno6JjKoQ6RFGpbgCLcBGAs/s1600/as.png);display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#74d2aa;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .featured .plan-features li span:before{content:url(https://4.bp.blogspot.com/-rJwM9QUD1k8/XK3x3ZlhbBI/AAAAAAAAAFw/DB62i6GeugMoHECaUkK2ZTfejIsIr2dUwCLcBGAs/s1600/benar.png);background-size:28px 28px;display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#fbca79;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .plan-select a{color:#fff;text-decoration:none;padding:0;font-size:.75em;font-weight:600;text-transform:uppercase;display:inline-block}
.table_price .featured1{width:40%}
.table_price .featured1 .headtitle{background:linear-gradient(to right,rgb(98,104,178) 0,rgba(21,234,209,1) 100%)}
.table_price .featured1 .plan-select{padding:30px 20px}
.table_price .featured1 .plan-select a{background-color:#222f3d}
.table_price .featured2{background:#fff}
.table_price .featured2 .headtitle{background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%)}
.table_price .featured{margin-top:-16px;background:#fff}
.table_price .featured .headtitle{background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
.table_price .featured .plan-select{padding:15px 5px;width:100%;color:#fff;font-weight:400;font-size:18px;background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
</style>

Nguồn bài viết: tham khảo từ BSW

Tạo khung thông báo lấy từ thư viện Bootstrap

LongAnIT 8/27/2019 Bình luận
Tạo khung thông báo đẹp lấy từ thư viện Bootstrap
Tạo khung thông báo lấy từ thư viện Bootstrap
Như bác bạn đã biết công dụng của bootstrap ngoài việc nó hổ trợ chúng ta bốc cục chia cột cho việc thiết kế website nó còn có rất nhiều compoment khác rất hay mà trong bài viết ngày hôm nay tôi muốn đề cập đến đó chính là Bootstrap Alerts.

Như bạn đã thấy hình ảnh phía trên tôi chụp lại bới 5 mẫu nội dung và màu sắc khác nhau. Tôi sẽ liệt kê các code bên dưới đi theo thứ tự từ trên xuống dưới.
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
<div class="alert alert-info">
<strong>Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.
</strong></div>
Việc còn lại là bạn chỉ việc chèn nó vào trong Web/Blog của bạn sau đó thay đổi nội dung là xong. Lưu ý nếu bạn sử dụng blogspot thì khi post bài bạn chuyển sang chế độ HTML trước khi copy code vào nhé. Chúc các bạn thành công!

Sắp xếp bình luận mới nhất, cũ nhất cho blogspot giống facebook

LongAnIT 8/27/2019 Bình luận
Hello các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục bài viết thủ thuật blogsppot. Như các bạn đã biết tính năng bình luận trong blogspot là : những bình luận mới nhất trong một chủ đề bài viết mặc định nó sẽ nằm phía dưới những bình luận trước đó điều này làm cho việc các bình luận mới bị trôi xuống phía sau làm cho chúng ta rất khó theo dõi.
Sắp xếp bình luận mới nhất, cũ nhất cho blogspot dạng facebook
Sắp xếp bình luận mới nhất, cũ nhất cho blogspot dạng facebook

Trong bài viết ngày hôm nay longanit sẽ hướng dẫn cho các bạn cách chèn thêm tính năng sắp xếp bình luận từ mới nhất → cũ nhất để bạn có thể dễ dàng theo dõi những bình luận mới nhất là khi nào!
Tính năng này tương tự như Comment của Facebook thì nay đã có thể sử dụng trên Blogspot 1 cách dễ dàng. Hãy làm theo các bước bên dưới nhé

Bước 1: Xác định nơi muốn hiển thị sắp xếp comment

Thông thường ta sẽ chèn phía trên những bình luận hoặc trên Khung Comment của Blogger.
Code phần bình luận có cấu trúc như sau.

Chèn code vào đây nếu bạn muốn hiển thị trên khung bình luận
<p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
Chèn code vào đây nếu bạn muốn hiển thị trên nội dung bình luận
    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
Bước 2: Sau khi xác định vị trí chèn code bạn copy toàn bộ đoạn code bên dưới và dán vào nơi bạn muốn chèn nhé
<b:if cond='data:post.numComments &gt; 2'>
<style>
.coud-com{float:left;font-weight:700;margin-top:4px;font-size:14px}
.sort-comment{margin-top:13px;text-align:left}
.sort-comment .sort-sel{display:block;position:relative}
.sort-comment .sort-sel span{font-size:14px;font-weight:400;color:#888}
.sort-comment .sort-sel .sort-option{font-weight:500;cursor:pointer;padding:0;color:#4b4f56;border:0;font:500 14px Roboto,sans-serif;outline:0;margin:0 0 0 -2px}
.post-author.bottom {font-size: 18px;float: left;line-height: 0px;margin: 14px 0 0 7px;color: #5273b8}
</style>
<span class='post-author bottom'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><i class='fas fa-pen-square'/> Viết bình luận (<data:post.numComments/>)</a></span>
<div class='sort-comment' style='float:right'>
<div class='sort-sel'>
<span style='font-size:14px'>Xếp theo</span>
<select class='sort-option'>
<option selected='selected' value='newest'>Cũ nhất</option>
<option value='oldest'>Mới nhất</option>
</select>
</div>
</div><script type='text/javascript'>
//<![CDATA[
$.fn.reverseChildren = function() {
return this.each(function() {
var $this = $(this);
$this.children().each(function() {
$this.prepend(this);
});
});
};
$(".comments-content ol").reverseChildren();
$(".sort-option").on("change", function() {
$(".comments-content ol").reverseChildren();
})
//]]>
</script>
</b:if>
Bước 3: Lưu lại và kiểm tra

Bài viết có tham khảo từ bạn Huỳnh Phụng Blogger. Chúc các bạn thành công nhé.
Lưu ý: Tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot mình đã viết lại điều kiện. ↠ chỉ hoạt động khi bài viết của bạn có từ 3 bình luận trở lên. Vì khi chỉ có 1 hoặc 2 bình luận ta cũng không có gì để cần phải sắp xếp để để tránh ảnh hưởng tốc độ Website.

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website

LongAnIT 8/27/2019 Bình luận
Trong bài viết hôm nay mình xin chia sẻ cho các bạn code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website. Các bạn có thể áp dụng cho blogspot của mình. Cách thực hiện rất đơn giản

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp

Chèn code này vào bất cứ vị trí nào muốn hiện, hoặc widget HTML/Javascript trong Bố cục.

<center><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer() {var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("h").innerHTML=t;}</script>
<span id="h"></span>
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></center>
<style>
#h {font-weight:400;
    display: block;
    font-size: 30px;
    margin: 0 0 5px;
    letter-spacing: 5px;
}
</style>
Chúc các bạn thành công!
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Tạo intro post cho blogspot ở trang tĩnh và trang bài viết

LongAnIT 7/12/2019 Bình luận
Hello xin chào các bạn, chúng ta lại gặp nhau trong chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi sẽ hướng dẫn các bạn cách để chúng ta tạo một intro post cho blogspot. Nghe có vẻ khá hiểu tuy nhiên hãy nhìn hình bên dưới như mình demo nhé.

Tạo intro  post cho bài viết và trang tĩnh blogspot
Tạo intro  post cho bài viết và trang tĩnh blogspot

Về cách thức hoạt động của code này như sau


  1. khi bạn truy cập vào  một bài viết bất kỳ thì phía trên bài viết sẽ hiển thị một hình nền chứa thông tin tiêu đề bài viết và đường link "permaklink" như hình trên.
  2. Code có thể tùy chỉnh được tất cả bao gồm hình nền màu sắc, hiệu ứng
  3. Code sử dụng thẻ điều kiện </b:if> để tùy biến hiển thị

Các bước tiến hành


Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới và dán nó vào phía bên dưới menu trong template của bạn
<!--Bắt đầu intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<style>
#longanit_postpage{position:relative;display:table;width:100%;height:46vh;margin:0!important;padding:0!important;z-index:999;background:url(https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg) no-repeat center center!important;background-size:cover!important}
#longanit_postpage:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#longanit_postpage:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.longanit_postpage_content{position:relative;z-index:3;margin:auto}
.longanit_postpage_label h2{animation: zoomInUp 6s; font-size: 31px; font-weight: 400; color: rgba(255,255,255,.85); margin: 0; padding: 0;text-transform:uppercase;text-align:center}
.longanit_postpage_label p{animation: zoomInDown 4s; font-size: 21px; font-weight: 300; color: rgba(255,255,255,0.7); margin: .5em 0 0 0; padding: 0}
.longanit_postpage_label{margin:0 auto;text-align:center;padding:0}
.longanit_meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='longanit_postpage'>
<div class='longanit_meta_'>
<div class='longanit_postpage_content'>
<div class='longanit_postpage_label'>
<h2 class='_title' id='post-title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/><data:blog.pageName/><i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p><data:blog.url/></p>
</div>
</div></div>
<div class='longanit_meta_'>
</div>
</div>
</b:if>
</b:if></b:if>

<!--Kết thúc intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
 Bước 3: Tiến hành save lại và xem kết quả. Bạn có thể chỉnh sửa lại một số thứ mình tô đỏ ở trên

Code sử dụng 3 thẻ điều kiện: Chỉ hiển thị trên trang bài viết, trang tỉnh và không hiển thị trên mobile
Thay thế link hình ảnh bằng link sau:
https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg
Chỉnh sửa độ rộng và chiều cao của bức ảnh banner bạn chỉnh code này: width:100%;height:46vh

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn một tùy chỉnh chuyên sâu áp dụng thẻ điều kiện vào trong blogspot để hoàn thành code tạo intro cho bài viết ở trang tĩnh và trang bài viết cũng như là trên mobile.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Highlight Author Comments in Blogger in threaded comment System

LongAnIT 7/12/2019 Bình luận
Nếu như blog của bạn có lưu lượng truy cập tương đối tốt thì blog của bạn cũng nhận được nhiều bình luận, điều đó có thể là tích cực hoặc tiêu cực. nhận ý kiến ​​liên quan đến cách bạn tương tác với khách truy cập.
Highlight Author Comments in Blogger in threaded comment System
Highlight Author Comments in Blogger in threaded comment System


Trong blog của bạn có nhiều bình luận. Làm thế nào khách truy cập blog xác định hoặc nhận ra nhận xét của bạn từ những bình luận này. Nhiều blogger sử dụng tên tài khoản là Quản trị viên. Nếu họ bình luận trong blog của bạn hoặc trả lời các bình luận khác, những khách truy cập khác nghĩ rằng đó là Quản trị viên của blog đó. Bạn có muốn làm nổi bật ý kiến ​​của bạn trong blog của bạn?

Chính vì thế mà trong bài viết hôm nay tôi sẽ hướng dẫn các bạn một thủ thuật nhỏ để làm đẹp phần bình luận của blogspot thủ thuật có tên gọi "Highlight Author Comments" tạm dịch làm đẹp CSS admin comment với một script khá đơn giản.


  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Copy toàn bộ đoạn code bên dưới và dán nó vào trước thẻ đóng </body>


<script type="text/javascript">
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;http://4.bp.blogspot.com/-pLzbR7dRJ_M/UcbQMLJAw1I/AAAAAAAAAh8/16rH5vfHKsM/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script>

Thay đổi địa chỉ URL ảnh mình tô đỏ bên trên thành địa chỉ URL image của bạn nhé.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn tạo thư viện ảnh cho Blogger

LongAnIT 7/02/2019 4 Bình luận
Như chúng ta đã biết tất cả các Website và Blog hiện nay đa phần đều có chuyên mục thư viện ảnh. Với thư viện ảnh các bạn có thể tùy biến làm đẹp cho website của mình ví dụ như: Ảnh hoạt động công ty, ảnh thiên nhiên, xe, nhà... và nhiều thể loại khác. 

Gallery tạo bởi longanit.com

Trong Blogger khi bạn upload hình ảnh khi đăng bài thì mặc nhiên hình đó sẽ nằm trong server của blogger. Tuy nhiên việc sắp xếp hình ảnh mặc định trong Blogger không được đẹp cho lắm. Vì vậy trong bài viết này LongAnIT sẽ hướng dẫn các bạn tạo một thư viện ảnh ( Gallery ) với các bước thực hiện đơn giản.

Bước 1: Đăng nhập vào Blogger - Trang - Tạo trang mới
Bước 2: Chuyển sang Tab HTML và Copy đoạn code bên dưới dán vào

<style>
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
    padding: 10px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}
.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 1" alt="SEO-IMAGE-CAPTION">
  </div>
  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 2" alt="SEO-IMAGE-CAPTION">
      <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 3" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>
  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 4" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
</div> 
Code trên chia làm bốn 4 cột mỗi cột 1 hình và Reponsive trên các thiết bị Smartphone. Nếu bạn muốn chia thành 3 cột hoặc 2 cột vui lòng thay đổi code sau trong CSS.

.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

  • Thay đổi giá trị :  24.99999% thành 33.333% ( chia làm 3 cột )
  • Thay đổi giá trị :  24.99999% thành 49.999% ( chia làm 2 cột )

Chú ý: Bạn tính làm sao để khi cộng giá trị tất cả các cột lại <=100% là ok

Kết luận: Bài viết trên tôi đã hướng dẫn các bạn cơ bản tạo thư viện hình ảnh trên blogger. Mọi thắc mắc vui lòng comment ngay bên dưới.

Hướng dẫn cơ bản cách nhúng bootstrap 3 vào trong blogger

LongAnIT 6/30/2019 Bình luận
Bootstrap 3 Framework

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

1. Tôi xin trích dẫn cấu trúc cơ bản của trang Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Đây là cấu trúc cơ bản của 1 template blogger ( Cấu trúc cơ bản, CSS, HTML...).

2. Để sử dụng bootstrap vào trong blogger chúng ta sẽ thực hiện cách sau:

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào ngay phía dưới thẻ <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
 Thêm thẻ Reponsive cho blogger
<meta name="viewport" content="width=device-width, initial-scale=1">
Kết luận: Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của bootstrap.

Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

LongAnIT 6/29/2019 Bình luận
Xin chào các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục tăng tốc blogspot toàn tập. Trong bài viết trước tôi có hướng dẫn các bạn cách Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên và sau khi thực hiện thì việc tải trang đã được cải thiện đáng kế. Trong bài viết ngày hôm nay longanit.com sẽ tiếp tục hướng dẫn các bạn cách tối ưu tốc độ load file css  với function loadCSS dạng font icon hay dẫn link.
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

Khi sử dụng blogspot tôi chắc rằng bạn nào cũng có sử dụng font load từ google có thể kể đến font Roboto và thêm một font nữa khá nặng là Font awesome icon. Tuy nhiên việc nhúng 2 font này theo cách thuần túy làm cho blogspot load khá là nặng. Để giảm thiểu tối đa tốc độ load cho nó bạn có thể sử dụng đoạn Script bên dưới mà tôi cung cấp.
 <script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>
 Bạn thay thế 2 link màu đỏ thành link file CSS cần load nhé. Tôi lấy thí dụ như hình bên dưới

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700")
//]]>
</script>

Lời khuyên từ kinh nghiệm


  1. Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..
  2. Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi. Theo kinh nghiệm bạn nên để kích thước dưới 150kb dưới 100kb càng tốt cho hình ảnh
  3. Về sử dụng font bạn có thể dùng font Helvetica co sẵn thay cho font Roboto về bản chất font này có sẵn load nhanh không qua server google lại khá là đẹp. 
Ngoài ra để nén hình ảnh bạn có thể truy cập vào 2 link bên dưới nếu bạn nào không rành về Photoshop hoặc các công cụ chỉnh sửa ảnh để giảm kích thước của ảnh.


Kết luận: Như vậy qua bài này tôi đã hướng dẫn các bạn thêm một cách tối ưu tốc độ tải trang cho blogspot nữa hi vọng sẽ giúp được các bạn phần nào trong việc làm chủ blogspot. Kính mời các bạn theo dõi trong phần tiếp theo vào ký tới nhé. Chúc các bạn thành công và SEO nhanh lên top nhé.


Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

LongAnIT 6/28/2019 Bình luận
Khi viết bài về thủ thuật blogspot chắc rằng chúng ta sẽ sử dụng nhiều nhất khung trích dẫn code cho bài viết. Có một số trường hợp xảy ra thường là nội dung bài viết, phần trích dẫn code, đoạn văn bản  hoặc đường link quá dài làm cho bài viết bị tràn ra ngoài khung. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn các bạn cách sửa lỗi nội dung trích dẫn code bài viết bị tràn ra ngoài.

Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot
Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

Trường hợp này thường là do copy bài viết tự một website khác dán vào bài viết, để khắc phục lỗi Text bị tràn ra khỏi khung bạn làm như sau:

Bước 1:  Đăng nhập vào phần quản trị => Chủ đề - Chỉnh sửa HTML
Bước 2:  Thêm đoạn code bên dưới vào trước thẻ đóng  ]]>
.post{word-wrap:break-word;}
 Chú ý: Nếu gặp phải trường hợp code khung trích dẫn quá dài ta thay thế bằng code sau:
blockquote{word-wrap:break-word}
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Phím tắt hữu ích cho khung soạn thảo Blogspot

LongAnIT 6/26/2019 Bình luận
Blogspot là nền tảng miễn phí và dễ sử dụng nhất tính tới thời điểm hiện tại. Bạn có thể sử dụng Blogger của Google để phục vụ cho công việc của mình, đơn giản là viết blog chia sẻ kinh nghiệm, hoặc tạo 1 Website bán hàng, Landing Page…
19 phím tắt hữu ích cho khung soạn thảo Blogspot
19 phím tắt hữu ích cho khung soạn thảo Blogspot

Nếu bạn là một blogger thì công việc viết bài nó trở thành quá quen thuộc rồi có phải không nào. Cũng giống tất cả các ngôn ngữ khác thì khung soạn thảo văn bản của Blogspot cũng có những công cụ phục vụ cho việc hỉnh sửa văn bản, hình ảnh, video... Tuy nhiên đối với những bạn thường xuyên làm việc với khung soạn thảo này thì những phím tắt sẽ vô cùng hữu dụng nó giúp bạn rút ngắn được thời gian trong việc soạn thảo cũng như chỉnh sửa bài viết. Trong  bài viết hôm nay longanit.com xin được giới thiệu với các bạn một số phím tắt thông dụng trong trình soạn thảo bài viết blogspot

PHÍM TẮT HỮU ÍCH CHO KHUNG SOẠN THẢO BLOGGER


1. Ctrl + C: Sao chép văn bản đã được chọn

2. Ctrl + V: Dán đoạn văn bản vừa mới sao chép

3. Ctrl + Z: Trả lại tác vụ trước đó

4. Ctrl + Y: Trả lại tác vụ sau khi nhấn Ctrl+Z

5. Ctrl + X: Cắt đoạn văn bản được chọn (bôi đen)

6. Ctrl + B: In đậm đoạn văn bản được chọn

7. Ctrl + A: Chọn toàn bộ văn bản trong trang

8. Ctrl + S: Tự động lưu bài viết của bạn

9. Ctrl + U: Định dạng gạch chân văn bản cho đoạn văn bản được chọn

10. Ctrl + I: In nghiêng đoạn văn bản được chọn

11. Ctrl + K: Chèn liên kết cho đoạn văn bản được chọn

12. Tab: Chuyển danh sách dạng list xuống list cấp 2

13. Tab + Shift: Xóa định dạng danh sách

14. Ctrl + F: Tìm kiếm từ hoặc đoạn văn bản trong trang

15. Ctrl + Shift + M: Chuyển trình soạn thảo bài viết sang chế độ xem trên Mobile

16. Ctrl ++ (Press + Twice): Phóng lớn trình soạn thảo

17. Ctrl — (Press – Twice): Thu nhỏ trình soạn thảo

18. Ctrl + 0 (Số không): Trả lại trình soạn thảo về kích thước mặc định

19. Ctrl+Shift+V: Loại bỏ định dạng đoạn văn bản mới copy và chỉ dán text vào khung soạn thảo.

Kết luận:
Trên đây là một số những phím tắt hữu ích cho khung soạn thảo văn bản Blogspot bạn nên áp dụng bởi vì nó có thể giúp bạn giảm thời gian định dạng và soạn thảo bài viết. Nếu bạn thấy hay thì hãy chia sẻ ngay để cho mọi người cùng biết nhé.


Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn tùy biến Widget ở những trang nhất định trong Blogspot

LongAnIT 6/22/2019 Bình luận
Hello các bạn. Hôm nay chúng ta lại gặp nhau trong topic thủ thuật blogspot. Như các bạn đã biết blogspot quản lý giao diện chính từ Template chứa tất cả các code người dùng sử dụng. Một phần nữa là Bố cục (Widget) - Giao diện đồ họa dành cho người dùng dễ thao tác có thể thêm/xóa các tiện ích

Đối với các blog có nhiều bốc cục thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Wiget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ.

Việc bố trí các Widget trên Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.Hiển thị Widget ở những trang nhất định trong Blogspot - ẩn hiện Wiget ở những trang nhất định trên desktop và moblie sẽ giúp tối ưu hóa tốc độ tải trang cho blog của bạn rất nhiều

Chính vì thế mà trong bài viết này longanit xin được giới thiệu đến các bạn thủ thuật ẩn hiện Widget ở những trang nhất định trong Blogspot”

 Xác định ID của Widget tiện ích cần tùy biến ta làm như sau:

Bước 1: Đăng nhập vào Blogger - Bốc cục như hình

Cách xác định ID của tiện ích Widget
Cách xác định ID của tiện ích Widget

Tại giao diện tiện ích chọn một Widget bất kỳ cần tùy biến click vào chỉnh sửa như hình

ID nằm phía bên phải cuối cùng của thanh Address
ID nằm phía bên phải cuối cùng của thanh Address
Nhìn lên phía trên thanh địa chỉ màu xanh bạn kéo con trỏ chỏ cho đền cuối cùng sẽ hiện thị ID của Widget như trong hình trên ID=HTML7.

Các bước tùy biến Widget

Sau khi hoàn thành xác định ID của Widget cần tùy biến bạn quay lại trang quản trị Blogger

  1. Chủ đề - Chình sửa HTML. 
  2. Phần phía trên thanh menu của template bạn sẽ thấy tab "chuyển đến tiện ích". 
  3. Tìm ID có tên là HTML7
Chỉnh sửa tùy biến trong template blogspot
Chỉnh sửa tùy biến trong template blogspot

Click vào dấu tam giác màu đen bên trái để mở rộng code ra như trong hình tôi có code này


<b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Bây giờ để ẩn Widget này ngoài trang chủ tôi sẽ thêm code bên dưới vào phía dưới dòng  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>
Sau khi hoàn thành tôi có code hoàn chỉnh như sau
 <b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Tiến hành lưu lại và xem kết quả. Cũng tương tự như thế dùng cho các thè điều kiện bên dưới để tùy biến

Hide from home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

Hide from index pages

(home, label, search page or all posts page (include home and its older posts pages).
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

Hide from static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

Hide from item pages (articles, posts)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

Hide from archive pages (showing posts by months / years)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

Hide from 404 pages

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <b:remove/>
</b:if>

Hide from mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>
Kết luận: Như vậy qua bài viết trên tối đã hướng dẫn các bạn cách để chúng ta tùy biến một widget bất kỳ trong blogspot bằng cách sử dụng một số thẻ điều kiện cơ bản. Chúc các bạn thành công

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.