Popup Purchase Button Box

Popup Button

Apa itu Popup Button?.
Pop up adalah tampilan berupa jendela kecil yang muncul dengan informasi tertentu di sebuah perangkat. Dalam hal ini bisa di komputer, aplikasi, website dan lainnya. Sebagai contoh, menu yang muncul saat Anda melakukan klik kanan di desktop komputer untuk mengubah pengaturan merupakan sebuah pop up. Sedangkan Button adalah tombol yang tampak pada layar komputer pada sebuah program yang jika diklik akan terkait dengan perintah tertentu.

Popup Button adalah tombol pop-up untuk memilih (option), menampilkan (open), dan menutup (close) daftar opsi atau status yang saling berhubungan / eksklusif.

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

Bagaimana Cara Membuat Widget Popup Purchase Button Box ?. Cara membuat widget purchase button box di blogger, sebagai berikut.

Langkah #1 - Menambahkan Kode CSS

Pertama Masuk ke Dashboard Blogger.
Pilih Tema.
Pilih Edit HTML.
Kemudian cari kode ]]></b:skin>, setelah ketemu Salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></b:skin>.

/* 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}}

Kemudian Pratinjau dan Simpan.

Langkah #2 - Menambahkan Kode HTML

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

Pertama masuk ke Dashboard Blogger.
Kemudian buat halaman baru atau edit halaman postingan yang sudah ada.
Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'.
Pilih' Tampilan HTML. '.
Copy paste kode script di bawah ini.

<!--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://sae.icu/#?url=mLO0bLF4Gw17v7bybZXwWRJtnZCymRPt' target='_blank'>Detail info</a></div>  
</div>
<div class='twt-buy-right'>
<h2>Metode Pembayaran</h2>
<a class='twt-buyb' href='https://sae.icu/#?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://sae.icu/#?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://sae.icu/#?url=mLO0bLF4Gw17v7bybZXwWRJtnZCymRPt' target='_blank'>Confirm here</a></div>
</div>
</div>
</div>
<!--kode script html purchase box - akhir-->

Kemudian Pratinjau dan Simpan.

Keterangan : Ganti teks dan url link , dengan yang anda inginkan.

Langkah #3 - Cara Penggunaan

Terakhir, salin kode script HTML di bawah ini yang berfungsi sebagai tombol otomatis yang ketika ditekan, menampilkan popup widget purchase button box. Dan kemudian letakkan kode script nya dimanapun yang Anda ingin menampilkan widget ini di halaman postingan yang dibuat pada langkah #2.

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

Demo

Demo tampilan widget popup purchase button box, berikut ini.

Buy Now

Demikian cara membuat widget popup purchase button box dengan kode script CSS dan HTML di blogger.

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

Go to Link

Sentra Bloggers

Membuat Widget Popup Purchase Button Box