Hello Everyone, Today in this post I am going to tell How To Add Purchase Box Widget in Blogger Website. This Widget is made with the help of HTML and CSS. So you can use it any platform like Wordpress.
This widget is inspired by theme.jagodesain.comsite, and intentionally I do not make 100% exactly the same but still resemble, for css and html 100% I wrote myself not just rename the class and id and admit homemade like the blog next door that has no shame.
The first reason I don't make 100% the same is because I don't feel good about the author jagodesain.com because he is very good at all and my fellow bloggers should also be able to appreciate each other.
The second reason I want to develop my coding skills, if I continue to copy the source code from other people's sites without trying then it will be difficult for me to be able to develop in the future.
and after all he also has a tutorial blog so if you want this widget purchase box exactly the same you can reguest directly to him only, or you can ask permission with him if you want to peel directly on his blog.
Demo: -
You can see the demo in below Screenshot.
How To Add Purchase Box Widget :-
Step 1 :- First of All You Need to Go To Blogger.Com.
Step 2 :- Then Login with Your Blogger Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After That Click on Edit Html.
Step 5 :- Then Copy The Given Below Css Code and Put it Above The ]]></b:skin> Tag.
/* purchase box widget by theforyou code */
.the-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}
.the-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}
.the-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}
.the-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}
.the-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}
.the-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c}
.the-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}
.the-buy-left h2,.the-buy-right h2{font-size:20px;margin:-10px auto 10px}
.the-buyd,.the-buyh{font-size:17px;font-weight:600;color:#48525c}.the-buyh{margin-top:-20px}
.the-buyd:before,.the-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.the-buyi,.the-buyc{font-size:12px;color:#767676;margin-top:10px}.the-buyi a,.the-buyc a,.the-buy-right a{text-decoration:none}
.the-buy-right span{font-size:17px;color:#767676;margin-left:35px}
.the-buyb,.the-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.the-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.the-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.the-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:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}
#the-check-pc:checked ~ .the-pc-wrap{visibility:visible;opacity:1}
#the-check-pc{display:none}
@media screen and (max-width:600px){.the-buyd,.the-buyh{margin:15px 0}.the-buyd:before,.the-buyh:before{margin:5px 0}.the-buy-right,.the-buy-left,.the-buyb,.the-buyp{position:relative;width:calc(100% - 10px)}.the-buy-right{left:0;padding:0}.the-pc-pop{width:400px}.the-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){.the-pc-pop{width:300px;line-height:20px}.the-pc-pop:before{top:250px;width:300px}.the-buy-left{margin-bottom:0}.the-buyi{line-height:20px}.the-pc-close:before{top:5px}.the-buyd:before,.the-buyh:before{margin-bottom:10px}svg.the-buysvg{margin-top:0}}
Step 7 :- After that Create a New Post Or Edit Old Post.
Step 8 :- Then Click on HTML View.
Step 9 :- Now You just need to copy the code Provided Below and paste in the end of your Post.
<input id='the-check-pc' type='checkbox'/>
<div class='the-pc-wrap'>
<div class='the-pc-pop'>
<label class='the-pc-close' for='the-check-pc'></label>
<div class='the-buy-left'>
<h2>Purchase Box Widget</h2>
<div class='the-buyd' aria-label='Detail'>Template theforyou pro</div>
<div class='the-buyh' aria-label='Harga'>Rs. 850/ $12</div>
<div class='the-buyi'>*Purchases can be made via Gopay, OVO and others <a href='#' target='_blank'>detail info</a></div>
</div>
<div class='the-buy-right'>
<h2>Payment method</h2>
<a class='the-buyb' href='#' target='_blank'>
<svg class='the-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='the-buyp' href='#' target='_blank'>
<svg class='the-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='the-buyc'>already paid? confirmation <a href='#' target='_blank'>Click Here</a></div>
</div>
</div>
</div>
<div style='text-align: center;'>
<label class='the-pc-btn' for='the-check-pc'>Buy Now!</label>
</div>
Conclusion :-
Well thats a short tutorial on How To Add Purchase Box Widget in Blogger Website. I hope you liked this post. Thank you for visiting our website.