Step 1: Create an account on www.buymeacoffee.com
Step 2: Retrieve your "buy me a coffee" link, i.e., https://www.buymeacoffee.com/your-username.
Step 3: Navigate to your Hashnode dashboard and click on the "Widgets" visible on the left-side panel.
Step 4: Click on the "Add New Widget" button at the top right corner of the widget area.
Step 5: Copy the code below and replace the "YOUR-USERNAME" placeholder with your BMC username.
<a href="https://www.buymeacoffee.com/YOUR-USERNAME" target="_blank" rel="noreferrer">
<img
src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee&emoji=&slug=YOUR-USERNAME&button_colour=5F7FFF&font_colour=ffffff&font_family=Lato&outline_colour=000000&coffee_colour=FFDD00"
alt="buy me a coffee"/>
</a>
Paste the code with your BMC username into the create new widget code text area as shown below:
Step 6: Create an ID for your widget. This ID will be used to insert the widget anywhere in your articles, i.e. %%[my-bmc-widget]
Step 7: If you don't want to manually insert the ID every time you publish a new article, you can enable the Pin Widget to pin the widget to the top or bottom of each article on your blog.
Pin to the top of each article
The widget will be visible at the top of each of your blog articles like this:
Pin to the bottom of each article
The widget will be visible at the bottom of each of your blog articles like this:
Step 8: Click the "Create" button to save your change.
How to Center the BMC Button Widget?
Wrap the img tag with the <center> tag to position the BMC button at the center of the page:
<a href="https://www.buymeacoffee.com/unclebigbay">
<center>
<img
src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee&emoji=&slug=unclebigbay&button_colour=5F7FFF&font_colour=ffffff&font_family=Lato&outline_colour=000000&coffee_colour=FFDD00"
alt="buy me a coffee"
/>
</center>
</a>