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 |
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
<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
- Responsive
- Seo Friendly
- Ads Ready
- Breaking News
- Fast Load
- 3 Columb
- Menu (Show/Hide)
- Drop Menu
- Header Sticky
- theiaStickySidebar
- Featured Random
- Load More Post
- Related Post
- Next Previous
- Social Share Sticky
- Medi Post
- Footer Nav
- Postmeta
- Breadcrumbs
- Grid Post Label Search
- Grid Post Search
- Error Page 404
- Back to top
- Full Static Page
- Comment Disqus
- 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
CÓ
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAFxrB6pyLKIfoUtlga7LKfTeoFHvNtde2wthz3iQzXmeOgCaHOpk_Swm3ssCNhdHV_gtELGPg9Sm27PIuYGNmTMXtfKC75Feq5_w7MWe-gfohLuarD5epk_ZqQGGzUkP_cZI3rGI-XFM/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/AVvXsEjVqnsaMEaJ9gzEkF9EHlBdLtYClAO8YZgDgFJOebZl4flRrqmHPqFKoRZ4vGrk9TMvFvsxryT9ZtSYnd2vgJ9LUSB9ZTrwUdrvxanX1i6GY1lOtEdHKJ1Exhe-MDPJikGIOoS9k8E-cmTv/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
Thanh toán bằng Paypal
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/AVvXsEiEGa4pQ9HZJiwdHWfHvHA7wH2kuW638MMQY4SI9vjW063dnOZ50cq60p9BoZRZMdB3sem9iGAT7abIP5-aYtH3CcPdrwYu5wY7j1r2LgBlNY2UGnh8TqRag47UN4zSHEX2wc06beWx4leR/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/AVvXsEg8VM3h2hXMNC6bEL8oqPVM3_gp7eL0fa3d7f2BVVGOyVzyEZ5bkQjl9xyKXsnNFkUgTZiVPLuViz8tzm3LeqINdIvGFctME7PzrtUpza56tnmZfiJShFheqH6Z45k-70vw-hAh0RNRDZug/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 -
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.