Addthis Cryptocurrency pay Buttons on Your Blogger Website

Cryptocurrency has become a popular form of online donation, and if you're using Blogger (Blogspot) for your website, it’s simple to add floating cryptocurrency donation buttons to your blog posts. These buttons are a great way to receive donations in Bitcoin, Ethereum, Solana, and more. In this step-by-step guide, I will walk you through the process of adding floating cryptocurrency donation buttons that will appear at the bottom of your posts when users scroll to the end.

---

Step 1: Prepare the HTML Code for the Donation Buttons

First, you need to create the HTML code that will display the cryptocurrency donation buttons. Below is the code for Bitcoin, Ethereum, and Solana donation buttons.

Here is the HTML code: (replace with your address)

<!-- Floating Cryptocurrency Donation Buttons -->
<div id="donateBar" style="position: fixed; bottom: 10px; right: 10px; z-index: 9999; display: none;">
    <a href="bitcoin:bc1q4t9fnku4vrn4qzp8yqzr4senupjmvckcy5pr83" class="donate-button" title="Donate Bitcoin">
        <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin" style="width: 40px; height: 40px; 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: 40px; height: 40px; 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: 40px; height: 40px; margin: 5px;" />
    </a>
</div>

---

Step 2: Add CSS for Styling the Donation Buttons

Next, you’ll need to add some CSS to style the cryptocurrency buttons. The code below ensures the buttons are round, and there’s a smooth hover effect when users move their mouse over the buttons.

Here’s the CSS:

<style>
    .donate-button {
        border-radius: 50%;
        transition: transform 0.2s ease;
    }

    .donate-button img {
        width: 40px;
        height: 40px;
    }

    .donate-button:hover {
        transform: scale(1.1);
    }
</style>

This will give your donation buttons a circular shape and a hover effect to make them interactive and visually appealing.

---

Step 3: Add JavaScript to Show the Donation Buttons After Scrolling

To make the buttons only appear once the user reaches the end of the post, we need to add some JavaScript. The following JavaScript code will ensure that the donation buttons will only appear after the user has scrolled to the end of the article.

Here’s the JavaScript:

<script>
    window.onload = function() {
        var blogPost = document.querySelector('.post');
        if (blogPost) {
            var postBottom = blogPost.offsetTop + blogPost.offsetHeight;

            window.onscroll = function() {
                if (window.scrollY + window.innerHeight >= postBottom) {
                    document.getElementById("donateBar").style.display = "block";
                } else {
                    document.getElementById("donateBar").style.display = "none";
                }
            };
        }
    };
</script>

This JavaScript checks if the user has reached the bottom of the post. Once they do, the donation buttons will become visible.

---

Step 4: Add the Code to Your Blogger Template

Now that we have the HTML, CSS, and JavaScript ready, it’s time to add them to your Blogger website.

Follow these steps:

1. Log in to your Blogger account:

   • Go to Blogger and sign in.

2. Navigate to the Theme section:

   • In the left sidebar, click on Theme. This will bring up the options for your blog’s appearance.

3. Click on the “Customize” button:

   • Under the “Theme” section, click on the Customize button.

4. Open the HTML editor:

   • On the right-hand side, click on the Edit HTML button. This will open the HTML code editor for your blog.

5. Scroll to the bottom of the HTML code:

   • In the HTML editor, scroll all the way to the bottom of the page. You should see the </body> tag, which is the last part of the HTML code for your blog.

6. Paste the code:

   • Paste the HTML, CSS, and JavaScript code you prepared earlier just before the closing </body> tag.

7. Save the changes:

   • After pasting the code, click the Save button to save your changes.

---

Step 5: Test the Floating Cryptocurrency Buttons

Now it’s time to test your changes!

1. Visit your blog: Open your blog in a new tab.
2. Scroll to the end of a blog post: As you scroll down, the cryptocurrency donation buttons should appear at the bottom-right of the page.
3. Click on the buttons: You can click on any of the buttons (Bitcoin, Ethereum, or Solana) to donate using that cryptocurrency.

---

Conclusion

Adding floating cryptocurrency donation buttons to your Blogger website is an excellent way to receive donations from your readers, offering a modern, secure, and easy method for online support. By following the steps above, you’ve learned how to add Bitcoin, Ethereum, and Solana donation buttons that only appear after the user has scrolled to the end of your post. These buttons won’t interfere with your content, yet they’ll be easily accessible to potential donors.

Now, go ahead and implement this feature on your blog and start accepting cryptocurrency donations today!

---