Membuat Widget Popup Purchase Button Box

Widget Popup Purchase Button Box

Bagaimana Cara Membuat Widget Popup Purchase Button Box ?.
Pembuatan Widget Purchase Button Box ini hanya menggunakan kode script HTML dan CSS. Jika ada kesalahan dalam penempatan kode script, maka widget ini tidak akan berfungsi dengan baik.

Tutorial

Cara membuat widget purchase button box di blogger, sebagai berikut.

Langkah 1 - Menambahkan Kode CSS

Salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></b:skin>
di Tema Blogger Anda.


/* Purchase Box Widget CSS Codes */
.twt-pc-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999999;visibility:hidden;opacity:0;transition:all .2s ease}
.twt-pc-pop{position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:800px;line-height:30px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);overflow:hidden;box-sizing:border-box}
.twt-pc-pop:before{content:'';display:block;position:absolute;right:-5px;top:-80px;width:50%;height:450px;border-top-left-radius:50%;border-bottom-left-radius:50%;background-color:#f1f1f0}
.twt-pc-close{position:absolute;top:5px;right:-10px;width:50px;height:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:30px}
.twt-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}
.twt-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c} 
.twt-buy-right{position:absolute;display:inline-block;margin-top:30px;left:50%;width:50%;color:#48525c;align-items:right;text-align:left;padding-left:50px} 
.twt-buy-left h2,.twt-buy-right h2{font-size:20px;margin:-10px auto 10px}
.twt-buyd,.twt-buyh{font-size:17px;font-weight:600;color:#48525c}.twt-buyh{margin-top:-20px}
.twt-buyd:before,.twt-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.twt-buyi,.twt-buyc{font-size:12px;color:#767676;margin-top:10px}.twt-buyi a,.twt-buyc a,.twt-buy-right a{text-decoration:none}
.twt-buy-right span{font-size:17px;color:#767676;margin-left:35px}
.twt-buyb,.twt-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.twt-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.twt-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.twt-pc-btn{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#214ECF;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em} 
#twt-check-pc:checked ~ .twt-pc-wrap{visibility:visible;opacity:1}
#twt-check-pc{display:none}
@media screen and (max-width:600px){.twt-buyd,.twt-buyh{margin:15px 0}.twt-buyd:before,.twt-buyh:before{margin:5px 0}.twt-buy-right,.twt-buy-left,.twt-buyb,.twt-buyp{position:relative;width:calc(100% - 10px)}.twt-buy-right{left:0;padding:0}.twt-pc-pop{width:400px}.twt-pc-pop:before{content:'';display:block;position:absolute;left:0;top:270px;width:400px;height:400px;background-color:#f1f1f0;border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:0}}
@media screen and (max-width:420px){.twt-pc-pop{width:300px;line-height:20px}.twt-pc-pop:before{top:250px;width:300px}.twt-buy-left{margin-bottom:0}.twt-buyi{line-height:20px}.twt-pc-close:before{top:5px}.twt-buyd:before,.twt-buyh:before{margin-bottom:10px}svg.twt-buysvg{margin-top:0}}

Langkah 2 - Menambahkan Kode HTML

Di setiap postingan yang ingin ditambahkan widget purchase button box , tempelkan kode HTML di bawah ini di akhir postingan.


<!--kode script html purchase box-->
<input id='twt-check-pc' type='checkbox'/>
<div class='twt-pc-wrap'>
<div class='twt-pc-pop'>
<label class='twt-pc-close' for='twt-check-pc'></label>
<div class='twt-buy-left'>
<h2>Pembelian Barang</h2>
<div class='twt-buyd' aria-label='Detail'>www.parabola.id</div>
<div class='twt-buyh' aria-label='Harga'>IDR. 850rb</div>
<div class='twt-buyi'>*Pembayaran dapat dilakukan dengan Cash dan Transfer. <a href='https://sentrabloggers.blogspot.com/#?url=mLO0bLF4Gw17v7bybZXwWRJtnZCymRPt' target='_blank'>Detail info</a></div>  
</div>
<div class='twt-buy-right'>
<h2>Metode Pembayaran</h2>
<a class='twt-buyb' href='https://sentrabloggers.blogspot.com/#?url=mLO0bLF4Gw17v7bybZXwWRJtnZCymRPt' target='_blank'>
<svg class='twt-buysvg line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
<span>Bank Transfer</span></a>
<a class='twt-buyp' href='https://sentrabloggers.blogspot.com/#?url=mLO0bLF4Gw17v7byWR50QR5lQZgdmEOlnB5ucI5aQB2=' target='_blank'>
  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
<path fill="#F2C7AA" d="M31.80859,29.41113c-0.19824-0.27197-0.50488-0.42383-0.85645-0.41016l-21,1
    C9.41895,30.02637,9,30.46631,9,31c0,8.82227,7.17773,16,16,16c0.41699,0,0.79004-0.25879,0.93652-0.64893l6-16
    C32.05469,30.03613,32.00586,29.68311,31.80859,29.41113z"/>
<path fill="#F2C7AA" d="M8,10V6c0-1.65685,1.34314-3,3-3H11c1.65685,0,3,1.34314,3,3v4"/>
<path fill="#F2C7AA" d="M16,10V5c0-1.65685,1.34314-3,3-3H19c1.65685,0,3,1.34314,3,3v5"/>
<path fill="#F2C7AA" d="M32,10V5c0-1.65685,1.34314-3,3-3H35c1.65685,0,3,1.34314,3,3v5"/>
<path fill="#F2C7AA" d="M24,10V3c0-1.65685,1.34314-3,3-3H27c1.65685,0,3,1.34314,3,3v7"/>
<path fill="#4DA34D" d="M46,34H2c-0.55225,0-1-0.44775-1-1V9c0-0.55225,0.44775-1,1-1h44c0.55225,0,1,0.44775,1,1v24
    C47,33.55225,46.55225,34,46,34z"/>
<path fill="#9EDB9E" d="M38,11H10c0,3.31372-2.68628,6-6,6v8c3.31372,0,6,2.68628,6,6h28c0-3.31372,2.68628-6,6-6v-8
    C40.68628,17,38,14.31372,38,11z"/>
<circle fill="#4DA34D" cx="24" cy="21" r="5"/>
<path opacity="0.1" d="M33,23.95068V30c-3.16504,0-6.32379,1.49603-8.44073,4h14.1488C38.89362,33.02704,39,32.02618,39,31V17.06183
    C34.52344,16.51318,33,19.63281,33,23.95068z"/>
<path fill="#F2C7AA" d="M41,17.06181c-4.47653-0.5486-6,2.571-6,6.88888V30c-5.5,0-11,4.5-11,11l0.00001,4.98149
    c0,0.55046,0.43692,1.01804,0.98738,1.01847C33.81543,47.00684,41,39.82647,41,31L41,17.06181z"/>
</g></svg>  
  
<span>Cash atau Tunai</span></a>
<div class='twt-buyc'>Already made a payment? <a href='https://sentrabloggers.blogspot.com/#?url=mLO0bLF4Gw17v7bybZXwWRJtnZCymRPt' target='_blank'>Confirm here</a></div>
</div>
</div>
</div>
<!--kode script html purchase box - akhir-->

Pembelian Barang

www.parabola.id

IDR. 850rb

*Pembayaran dapat dilakukan dengan Cash dan Transfer. Detail info

Metode Pembayaran

Bank Transfer

Cash atau Tunai

Already made a payment? Confirm here

Langkah 3 - Cara Penggunaan

Terakhir, salin kode script HTML di bawah ini, berfungsi untuk tombol yang ketika ditekan, menampilkan popup widget purchase button box. Dan kemudian letakkan kode script HTML nya dimanapun yang Anda ingin menampilkan widget ini.


<div style='text-align: center;'>
<label class='twt-pc-btn' for='twt-check-pc'>Buy Now!</label>
</div>

Demo

Buy Now

Tutorial Blogger