Cara Membuat Check Out Box Pop-Up Dengan CSS di Blog

Cara Membuat dan Memasang Widget Check Out (Purchase) Box Keren Gaya Pop-Up di Blogger Dengan CSS - Menu atau widget check out merupakan salah satu fitur terpenting pada setiap website atau blog dengan kategori e-commerce.

Widget atau halaman check out (purchase) ini akan sangat berguna dan membantu bagi para calon pembeli dalam melakukan pembayaran terkait barang yang akan mereka beli.

Coba kamu bayangin, misalkan ada sebuah website atau blog toko online shop yang ramai dengan pembeli, namun di website atau blog tersebut tidak disediakan langsung halaman atau menu check out (purchase) ini. Gimana menurut kamu? Pasti bakalan sangat amat ribet yah.

Selain di rasa sulit oleh para calon pembeli, website atau blog toko online yang tidak di lengkapi dengan fitur atau halaman check out (purchase) juga akan terkesan sangat jadul dan tidak profesional.

Bagi kamu yang memiliki toko online pribadi dan belum memiliki fitur atau widget check out (purchase) ini di blog kamu, sebaiknya kamu segera buat dan pasang fitur ini ke blog kamu guna mempermudah para calon pembeli dan meningkatkan kualitas toko online kamu.

Gak tahu cara buatnya gimana? Tenang, kamu bisa ikuti tutorial cara membuat widget atau fitur check out box ini dibawah. Artikel ini akan membahas bagaimana cara membuat widget atau fitur check out (purchase) box di Blogger atau WordPress dengan menggunakan pure CSS.

Widget check out box ini sebetulnya mirip seperti widget atau fitur shopping cart yang sering digunakan di website atau blog toko online. Namun widget kali ini di lengkapi dengan gaya popup agar tampilan lebih keren dan elegan.

Apakah Widget Check Out Box Ini Memberatkan Loading Blog?

Widget check out box ini sama sekali tidak akan memberatkan loading blog kamu. Kenapa? Ya karena widget box ini hanya menggunakan CSS saja tanpa JavaScript atau jQuery. Dan CSS ini juga sudah di optimasikan menggunakan alat CSS Minifier agar tidak mengusik loading blog kamu secara berlebih.

Selain itu, seluruh ikon yang saya gunakan untuk membuat widget check out box ini juga menggunakan ikon SVG bukan menggunakan ikon font awesome atau yang lainnya. Hal ini guna meminimalisir pemuatan ikon yang digunakan.

Ouh ya, widget check out (purchase) box ini memiliki gaya atau style pop-up. Jadi widget ini akan muncul ketika user mengklik tombol yang sudah di sediakan

Tertarik membuat dan memasang widget check out box ini di blog kamu? Berikut tutorial cara membuat dan memasang fitur atau widget check out (purchase) box keren di Blogger dan WordPress dengan CSS.

Cara Membuat dan Memasang Widget Check Out (Purchase) Box Keren di Blog Dengan CSS

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian cari kode CSS di template kamu. Penulisan kode bisa di tulis dengan ]]></b:skin> atau  </style>
4. Ketemu? Kalau sudah ketemu, salin dan taruh CSS dibawah ini tepat diatas kode yang kamu cari tadi, yaitu ]]></b:skin> atau </style>

   /* Widget Check Out Box */
   .wc-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}.wc-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}.wc-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}.wc-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}.wc-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}.wc-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c}.wc-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}.wc-buy-left h2,.wc-buy-right h2{font-size:20px;margin:-10px auto 10px}.wc-buyd,.wc-buyh{font-size:17px;font-weight:600;color:#48525c}.wc-buyh{margin-top:-20px}.wc-buyd:before,.wc-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}.wc-buyi,.wc-buyc{font-size:12px;color:#767676;margin-top:10px}.wc-buyi a,.wc-buyc a,.wc-buy-right a{text-decoration:none}.wc-buy-right span{font-size:17px;color:#767676;margin-left:35px}.wc-buyb,.wc-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}svg.wc-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}svg.wc-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.wc-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}#wc-check-pc:checked ~ .wc-pc-wrap{visibility:visible;opacity:1}#wc-check-pc{display:none}@media screen and (max-width:600px){.wc-buyd,.wc-buyh{margin:15px 0}.wc-buyd:before,.wc-buyh:before{margin:5px 0}.wc-buy-right,.wc-buy-left,.wc-buyb,.wc-buyp{position:relative;width:calc(100% - 10px)}.wc-buy-right{left:0;padding:0}.wc-pc-pop{width:400px}.wc-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){.wc-pc-pop{width:300px;line-height:20px}.wc-pc-pop:before{top:250px;width:300px}.wc-buy-left{margin-bottom:0}.wc-buyi{line-height:20px}.wc-pc-close:before{top:5px}.wc-buyd:before,.wc-buyh:before{margin-bottom:10px}svg
   .wc-buysvg{margin-top:0}}

5. Klik simpan kalau di rasa semua kode CSS sudah berhasil di pasang ke dalam template blog
6. Kembali ke halaman dashboard lagi lalu masuk ke menu Layout
7. Setelah itu tambahkan sebuah widget baru (bisa di bagian sidebar atau footer)
8. Kemudian taruh kode dibawah ini ke dalam kolom kontennya

   <input id='wc-check-pc' type='checkbox'/>
   <div class='wc-pc-wrap'>
   <div class='wc-pc-pop'>
   <label class='wc-pc-close' for='wc-check-pc'></label>
   <div class='wc-buy-left'>
   <h2>Purchase</h2>
   <div class='wc-buyd' aria-label='Detail'>Outfit</div>
   <div class='wc-buyh' aria-label='Price'>$15</div>
   <div class='wc-buyi'>*Purchase can be made through PayPal, Gumroad. <a href='#' target='_blank'>Detail info</a></div>  
   </div>
   <div class='wc-buy-right'>
   <h2>Purchase Method</h2>
   <a class='wc-buyb' href='#' target='_blank'>
   <svg class='wc-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='wc-buyp' href='#' target='_blank'>
   <svg class='wc-buysvg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
   <span>Paypal</span></a>
   <div class='wc-buyc'>Already made a payment? <a href='#' target='_blank'>Confirm Here</a></div>
   </div>
   </div>
   </div>

   Kamu bisa atur sendiri teks yang saya tandai sesuai dengan teks pilihan kamu.
9. Terakhir klik simpan dan lihat hasilnya

View On Codepen

Nah, itu dia tutorial cara membuat dan memasang widget check out box style pop-up dengan CSS di blog. Kalau masih bingung atau ada sedikit masalah dalam memasang kode, tanyakan di kolom komentar. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan.

Cindy NOTHING!!!

Share :