Beberapa Shortcode HTML Yang Bagus Untuk Desain Konten

Beberapa Shortcode HTML Yang Bagus Untuk Desain Konten - Hallo sobat blogger semua, sudah beberapa hari ini admin tidak membagikan artikel di blog ini dikarenakan kesibukan admin didunia nyata. Pada kesempatan ini saya akan membagikan beberapa Shortcode HTML yang bagus untuk desain postingan blog.

Mungkin sobat pernah melihat shortcode seperti ini di blog nya Goomsite.net, salah satu designer template yang karyanya sangat profesional dan gak pasaran pastinya. Seperti biasa saya akan membagikan 2 shortcode.
1.Membuat Bingkai Catatan
2.Button Pembayaran

Dan untuk melihat live demonya, Sobat bisa klik tombol demo dibawah ini.


Shortcode dibawah ini bisa digunakan untuk platform Blogspot ataupun WordPress dengan normal.

1.Buat Konten Notes

<div class="content-table">
<div class="text-description">
<h2>
CATATAN</h2>
</div>
<div class="text-post">
Silakan masukkan konten catatan di sini
Silakan masukkan konten catatan di sini
Silakan masukkan konten catatan di sini
Silakan masukkan konten catatan di sini</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.Tombol Pembayaran atau Transfer

<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>Bayar dengan Paypal</span></div>
</div>
<div class="link-paypal">
<span class="item_price"><a href="https://anazdzgn.com/" target="_blank" title="Buy now"><span class="home-paypal">USD 9.00</span><span class="post-paypal">Buy Now</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">IDR250.000</span>
<span class="bank-grup"><span class="tag-os"></span>Transfer bank</span></div>
</div>
<div class="link-bank">
<a href="https://anazdzgn.com/" target="_blank" title="Buy now">Buy Now</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>

Cara Menggunakannya :
Sobat bisa memasangnya di postingan blog melalui mode HTML

Demikian artikel dari saya tentang Beberapa Shortcode HTML Yang Bagus Untuk Desain Konten, Semoga artikel diatas bermanfaat bagi sobat semua. Terimakasih dan selamat mencoba

Post a Comment

0 Comments

close