How To Create Donation Page In Blogger HTML and CSS
Creating a donation page in Blogger requires some knowledge of HTML, CSS. Here are the steps to create a simple donation page in Blogger:
• Replace "YOUR PAYPAL EMAIL ADDRESS HERE" with your PayPal email address.
• First, login to your Blogger account and go to the "Layout" section.
• Click on "Add a Gadget" in the area where you want to add the donation form.
• Select the "HTML/JavaScript" gadget from the list.
• In the "Content" field, paste the following HTML code:
HTML
<div class="donation-box">
<h2>Donate Now</h2>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="YOUR PAYPAL EMAIL ADDRESS HERE">
<input type="hidden" name="currency_code" value="USD">
<input type="number" name="amount" placeholder="Enter amount">
<input type="submit" value="Donate">
</form>
</div>
<style>
.donation-box {max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.donation-box h2 {text-align: center;
margin-top: 0;
}
.donation-box form {display: flex;
flex-direction: column;
align-items: center;
}
.donation-box input[type="number"] {padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
background-color: #ebebeb;
font-size: 16px;
width: 100%;
max-width: 300px;
text-align: center;
}
.donation-box input[type="submit"] {padding: 10px;
border: none;
border-radius: 5px;
background-color: #ff7f50;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.donation-box input[type="submit"]:hover {background-color: #ff6347;
}
</style>
• Click on "Save" to save the gadget.
• Save the template and view the donation page.
Note: This is just a basic example of how to create a donation page in Blogger. You can customize the form and style to fit your needs. Also, be sure to follow any applicable laws and regulations when accepting donations.
Preview
Donate Now
Rate this article
Getting Info...