Here’s how you can integrate the cryptocurrency donation buttons with your existing social share buttons script. This code will add both the social share and cryptocurrency donation buttons at the end of each post on your Blogger website.
Full Code (Social Share + Crypto Donation Buttons):
<script>
function addButtons() {
let posts = document.querySelectorAll('.post-body');
posts.forEach(post => {
let url = encodeURIComponent(window.location.href);
let title = encodeURIComponent(document.title);
// Social share buttons
let shareHTML = `
<div class="social-share">
<a class="share-btn fb" href="https://www.facebook.com/sharer/sharer.php?u=${url}" target="_blank" title="Share on Facebook">
<img src="https://cdn-icons-png.flaticon.com/512/145/145802.png" alt="Facebook">
</a>
<a class="share-btn tw" href="https://twitter.com/intent/tweet?url=${url}&text=${title}" target="_blank" title="Share on Twitter">
<img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter">
</a>
<a class="share-btn wa" href="https://api.whatsapp.com/send?text=${title} - ${url}" target="_blank" title="Share on WhatsApp">
<img src="https://cdn-icons-png.flaticon.com/512/220/220236.png" alt="WhatsApp">
</a>
<a class="share-btn tg" href="https://t.me/share/url?url=${url}&text=${title}" target="_blank" title="Share on Telegram">
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" alt="Telegram">
</a>
</div>`;
// Cryptocurrency donation buttons
let donateHTML = `
<div class="crypto-donate" style="text-align: center; margin-top: 20px;">
<a href="bitcoin:bc1q4t9fnku4vrn4qzp8yqzr4senupjmvckcy5pr83" class="donate-button" title="Donate Bitcoin">
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin" style="width: 50px; height: 50px; margin: 5px;" />
</a>
<a href="ethereum:0xEe90f1177d068F672A5544144001a2eb37f05765" class="donate-button" title="Donate Ethereum">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg" alt="Ethereum" style="width: 50px; height: 50px; margin: 5px;" />
</a>
<a href="solana:8xoacbambb4vA2qV7yXTd8rRxYW5QgyHuGi9XgZcA1ny" class="donate-button" title="Donate Solana">
<img src="https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png" alt="Solana" style="width: 50px; height: 50px; margin: 5px;" />
</a>
</div>`;
// Insert the buttons into the post body
post.insertAdjacentHTML('beforeend', shareHTML + donateHTML);
});
}
document.addEventListener("DOMContentLoaded", addButtons);
</script>
<style>
.social-share {
text-align: center;
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.share-btn img {
width: 40px;
height: 40px;
border-radius: 50%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.share-btn img:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.crypto-donate a {
display: inline-block;
margin: 5px;
}
.crypto-donate img {
width: 50px;
height: 50px;
border-radius: 50%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.crypto-donate img:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
</style>
Instructions:
- Log in to Blogger and go to your blog.
- Go to Layout> Add a gadget > HTML/JAVASCRIPT
- paste the code
- Change your wallet address
- Save the changes.
How it Works:
- This code will add both social sharing buttons and cryptocurrency donation buttons at the end of each post.
- The buttons will appear below the post content when the page is loaded.
- The social sharing icons include Facebook, Twitter, WhatsApp, and Telegram.
- The cryptocurrency donation buttons are provided for Bitcoin, Ethereum, and Solana.
The buttons will have hover effects that make them scale and add a subtle shadow, giving them an interactive feel.
Comments
Post a Comment