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

USD 9.00Thanh Toán

250.000VNĐ Chuyển khoản ngân hàng

Thanh Toán

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdEQaVWc7HK1MS3HneDP_nWH5Sc5RciEzBi7Ae9yDsvlK3Z46h403h0HG68k1Mbh7UDLQUuw6jzLOvEs1oQY2UMUmJXp-fNLqdwx-RRVKWUHOfiZW0PQkdPacpfWoXz-CWpRZUcDvAKhU/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/AVvXsEhzIy70SwdwDJtEnzOs5G5aQZbZ5qhAz35mt8Kjo4YdmItaXKRNFPKG1f5bj2OM9XE6UQ3Fso_egM8mTyA62nbmdv5DQfUHmI-1BxtmMStmaPaCMCYwfQV6bYPCkSibd2Sjuxt7qN8Sgm_V/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

CÓ

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5GXEaxyKQqcLy9Xe2DsHKzsRURVPaweSaA7JcXQL0DOY6YU-guLIAmzDudm9LaEbCnOyznnTXrFFoMihGgzy9Mc4dTbPpbOSD3FrIelxQHng25VIyig3GUQUoN8GxHwTdkoHXYgrDcII/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/AVvXsEi4aboKGw6D7_EspddvT4qep2iiLwgL7c2spzDAl0DE6YMJSH7x5311eBiNlxHRrdZDnw9ijnwZEColdRpYj3dmoZZX6dBU-Mu5CCrXctu7VYxzTr3kr2QIZ-J6goYF8GtTlCx8y4x7e5Jj/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