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

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.
Blogspot, Wordpress và tất cả các mã nguồn khác đều có thể sử dụng bình thường..!

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"></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmmE7ca2zPKdtUNhZgCQYdTsVHmnaDWTYcWnJB7ea2jePcjN7lAw0BhbRmMe7SgfG05eTAo8H9vtRYjb8uR60my3makHDjJW02IU3zSYlajqt8j9uYIJzDOyr6-S-phqyba2tCXDb2kPK7/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZT9n8XuHebgXHT_0c1wn15UFVAr96CFSAE577MRJpZ4Iw86vRAUiLMnEZIQg5UN5vamDRjEL41l8g7_ONR1eI9gHsT2S1DrQgwLiA60dZBjKheAMw2n47nnzO4bLYpe0rHKkb4jzLb5D/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0nnOSWTId8iyCz9-HUZpzJVi9m4J0UUSQougtF6bKI26W-7nGpP2f8SuyZ0Rf7t95YdTcTbco7zTVdGact3RsSun_BbDswWd_zChKujBhJbvPTYFz4b9DmZs51L4v9bGM-N_XZPVkRbEm/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpYROBmqPNdTZbpx6CyoCdPSni7Gwijrqeo-SyZdlUldTpFXyZ0xdsnVj_sPoqei0VOe2HfiBpmGbqAXfdpATLHcL-4QQAvROHiDr0OCM3QYD7YgYXY-oJ9OAp0TzNrnWK2vmO1TuvQ7lM/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 -

    Post a Comment

    Previous Post Next Post