Tổng hợp các kiểu slider bài viết blogger

LongAnIT 9/27/2019 Bình luận
Hello các bạn đã lâu không viết bài về thủ thuật blogspot. Hôm nay rãnh rỗi search trên google thấy mấy code slider bài viết blogspot khá hay với nhiều kiểu hiệu ứng cũng như tùy biến khá hay nên muốn chia sẽ cho các bạn nào cần nhu cầu sử dụng.
Tổng hợp các kiểu slider bài viết blogger
Tổng hợp các kiểu slider bài viết blogger 

Thực hiện các bước như tôi hướng dẫn dưới đây


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 dán vào trước thẻ đóng </head>

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Preloader */
.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}
.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}
.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.flexslider a {
    text-decoration: none;
}

/* Caption/Post Title */
.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}
.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}
.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}
ul.slides li a {
    display: block;
    overflow: hidden;
}

/* blogger css conflicts fix */
.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}
.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}
.flexslider ul li {
    margin-bottom: 0 !important;
}
.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
ul.flex-direction-nav {
    position: static;
}
ul.flex-direction-nav li {
    position: static;
}
.error {
    font-family: monospace, sans-serif;
}
@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>
Bước 3: Tìm một nơi đẹp để đặt vị trí slider bài viết mà bạn muốn hiển thị thường code này hay để dưới header của blog. Tùy bạn có thể chọn nơi khác để đặt code. Ở đây tôi chia sẻ 3 code với tùy chỉnh khác nhau:

Code 1


<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay địa chỉ url thành địa chỉ blog của bạn
    });
});
</script>

Code 2:


<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider2").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay url thành địa chỉ blog của bạn
        labelName: "nhãn của bạn", // Thay nhãn của bạn muốn hiển thị
        maxItem: 9, // Số bái viết tối đa cần hiển thị
        showPostTitle: true, // Hiển thị tiêu đề bài viết (true/false)
        postTitleStyle: "overlayDark", // Các kiểu hiển thị  "default, "overlayDark" or "overlayLight"
        imageWidth: 704, // Độ rộng ảnh bài viết
        imageHeight: 440, // Chiều cao ảnh hiển thị tính bằng px
    });
});
</script>

Code 3:


 <div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Chiều rộng ảnh tính bằng px
        imageHeight: 398, // Chiều cao ảnh tính bằng px
        maxItem: 6, // Số bài viết tối đa cần hiển thị
        animation: "slide", // Lựa chọn kiểu slider "fade" or "slide"
        showPostTitle: true, // Hiển thị tiêu đề bài viết  (true/false)
        postTitleStyle: "overlayLight", // Hiển thị kiểu khung slider "default, "overlayDark" or "overlayLight"
    });
});
</script>

Trường hợp bạn muốn đưa tất cả vào một Widget thì copy toàn bộ các code trên vào chung cũng được nhé. Chú ý là phần code 1, code 2 và code 3 bạn chỉ chọn 1 trong 3 code thôi.

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 cách tạo Subdomain cho blogspot

LongAnIT 9/10/2019 1 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.

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.