Chia sẻ một số Shortcode đẹp sử dụng HTML, CSS để thiết kế nội dung bài viết chỉnh chu và chuyên nghiệp.

Một số shortcode đơn giản được sử dụng bên dưới như:
- Tạo khung Ghi chú
- Khung ghi chú đánh số thứ tự
- Tạo bảng 3 cột
- Botton thanh toán
- Botton Demo

Dưới DEMO các shortcode là code chỉ cần bạn chàn và sử dụng trong phần HTML bài viết là được.

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


1. Tạo nội dung Ghi Chú

GHI CHÚ

Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây

<div class="content-table">
<div class="text-description">
<h2>
GHI CHÚ</h2>
</div>
<div class="text-post">
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây</div>
</div>
<style>
.content-table {
    margin: 0;
    display: flex;
    -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);
}
.content-table .text-description {
    background: -moz-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
}
.content-table .text-description, .content-table .text-features, .content-table .text-updates {
    padding: 5px;
    margin: 0 auto;
    white-space: nowrap;
    text-align: center;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-rl;
    transform: scale(-1,-1);
}
.content-table .text-description h2, .content-table .text-features h2, .content-table .text-updates h2 {
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
.content-table .text-post {
    padding: 10px;
    margin: 0;
    background: #fff;
    width: 100%;
}
</style>

2. Ghi chú có đánh số thứ tự

DANH SÁCH


  1. Responsive
  2. Seo Friendly
  3. Ads Ready
  4. Breaking News
  5. Fast Load
  6. 3 Columb
  7. Menu (Show/Hide)
  8. Drop Menu
  9. Header Sticky
  10. theiaStickySidebar
  11. Featured Random
  12. Load More Post
  13. Related Post
  14. Next Previous
  15. Social Share Sticky
  16. Medi Post
  17. Footer Nav
  18. Postmeta
  19. Breadcrumbs
  20. Grid Post Label Search
  21. Grid Post Search
  22. Error Page 404
  23. Back to top
  24. Full Static Page
  25. Comment Disqus
  26. More...



    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




    <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>

    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
    <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>



    Button Demo



    <div class="item_demo">
    <a class="demo" href="#" target="_blank">Demo</a></div>
    <style>
    .item_demo {
    text-align: center;
    margin: 18px auto;
    background: #fff;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 28px rgb(248,249,250);
    }
    .item_demo a {
    font-size: 17px;
    position: relative;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #b5b5b5;
    padding: 9px 20px 9px 61px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin: 5px;
    -webkit-box-shadow: 0 10px 25px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 25px 0 rgba(0,0,0,.15);
    }
    .item_demo a.demo:before {
    width: 30px;
    height: 30px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    font-size: 18px;
    top: 0;
    left: 0;
    font-weight: normal;
    position: absolute;
    padding: 8px;
    margin-right: 20px;
    background: #f7383c;
    background: -moz-linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%);
    background: -o-linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%);
    background: -ms-linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%);
    background: linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%);
    color: #fff;
    content: "";
    }
    </style>

    - BacSiWindows -
    0 bình luận
    Tag
    • 0 bình luận
    • Mặt cười
    • Chèn ảnh
    • Mã hóa HTML
    • Lưu ý
    • Admin Panel
    • :))
      :((
      :D
      :(
      :)
      :-)
      ;)
      =))
      :p
      =.=
      ==
      ^_^
      /=he
      :*
      /=r
      /=l
      :v
      /=ok
      /=clap
      (y)
      (yy)
      /=hi
      /=j
      /=hup
      /=hd
      /=hl
      /=hr
      /=s
      <3
    • Chức năng này hiện chưa khả dụng, bấm vào đây để sử dụng tạm.
    • Hướng dẫn bình luận

      Chèn chữ in đậm: Chữ in đậm

      Chèn chữ in đậm: Chữ in nghiêng

      Chèn ảnh: [img]Link Ảnh[/img]


      Một số lưu ý khi bình luận

      Không đăng bình luận có nội dung khiêu dâm, 18+

      Không đăng bình luận có liên quan đến chính trị, nhà nước.

      Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

      Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

      Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

      Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

      Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

      Được đăng bình luận có liên quan đến nội dung bài viết.

      Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

      Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

      Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.

      Bấm vào đây để xem chi tiết hơn nội quy trên Blog.

    • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    • Một số lưu ý khi bình luận

      Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

      Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

      Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

      Nhớ bấm Thông báo cho tôi bên trên để nhận thông báo qua Email khi Admin trả lời nhé.