CSS card code for donations through ABA Bank

 

Posting a picture of a bank account so that visitors can donate a small amount of money and save on coffee. Writing to share knowledge with readers is common for content writers on the Internet. In this tip, I will show you how to code a picture card to show the name and account number of ABA Bank to make it easier for philanthropists to donate to Blog owners because today we Cambodians almost use spending and money transfer online is a common thing that in the past if you want Tip is to scratch the phone card and shoot via SMS (text message).

៙ How to put Font Awesome template code into Blogger template ៖

- Log in to your blogger.com account. - Add Font Awesome font code to blogger (if your blog already exists, you do not need to add it anymore).
Go to Theme >> Click the arrow next to CUSTOMIZE and select Edit HTML.
Find the <head> tag, copy the code below and paste it under the tag.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css' rel='stylesheet'/>

៙ Insert Card Code into Gadget៖

Go to the Layout tab >> click Add a Gadget (in the right sidebar) or where you want the gadget.
- Select the gadget named HTML / Javascript and paste the following code.
 <div class="aba-card">
<div class="aba-logo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoc19QDGcjX5KAAP-_aqPv_ODy-j5H7XcKMW5SpH0tjS3Cz6TQ5kgixIyrNeExYErE2kSTuL4cZIOCxGcYvBL3skDPtpefYZ2KWrgZJ-wRX3uelnGSJkxymn1Lho3q6uF0yDWzxuuJ4KedlKVcWwXLw_rK_R9EyEwxj1JyQpFT5AC09wG3abEhDytk7g/s512/unnamed.png"/></div>
<div class="aba-account">
<div class="account">
<div class="acc-name">Samnang Nouv</div>
<div class="acc-num">000 271 862</div>
</div></div>


<style>
.aba-card{display:flex;gap:12px;align-items:center;background-color:#051937;background:linear-gradient(to right top,#051937,#073659,#03557a,#00779a,#0f9ab7);padding:13px;border-radius:8px}
.aba-logo{width:45px;height:45px;flex-shrink:0;background:rgba(155,155,155,0.05);border-radius:100%}
.aba-logo img{width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:100%}
.aba-account{display:flex;gap:10px;justify-content:space-between;align-items:center;flex:1}
.aba-account::after{content:'\f4c0';font-family:'fontawesome';color:#f1f1f1;font-size:20px;}
.aba-account .account{font-size:15px;font-weight:400;color:#fff;line-height:1.5em;letter-spacing:.5px}
</style></div>
How to edit:
- Edit Samnang Nouv name of ABA account
- Edit 000 271 862 Enter bank account number

Note: Account name and number must match.

This tip we can put in different banks by changing the bank logo and color. That's it, see you at Blogger next time.



097 71 999 72


Post a Comment

Previous Post Next Post