Once again, Hello 👋 readers. In this tutorial I would be sharing with you all a complete guide to setup a custom button for your Buy me a coffee page in blogger. Although, BMC provide you with a option to integrate BMC buttons directly using their <script> code , but buttons generated by their script are not much customizable, like their position could not be changed, you cannot control the sizes of these buttons etc. So to match these buttons with the theme of your website you'll need to create your own customized buttons which do same work as done by those created by <script> of BMC.
What is Buy Me a Coffee?
A supporter is worth than 1000 followers. Every creator needs support to continue his work. Buy Me a Coffee is among the top choices of content creators to collect donations from their supporters. It is an American company which provides a service for creators to collect donations from their supporters and fans.It provides an independent page for every creator with many customizations which can be accessed by the supporters and can be used by them to give donations to the content creators.
How does it work?
BMC provide you with an unique URL for your page using which your supporters can donate you with some funds. It is essential to add a donate button or any other UI element which could be linked with your BMC's page URL to provide your supporters an ease to reach you.
How to add custom floating Buy Me a Coffee button in Blogger?
You have to follow below steps to achieve this task.
Before you head to below steps, please make your profile on Buy Me a Coffee website and generate your BMC's page URL.
Step 1) First of all visit the blogger.com dashboard.
Step 2) Now go to theme section.
Step 3) Then click on drop down arrow of customize and select Edit HTML.
.suppoprt-me {
display: inline-block;
position: fixed;
bottom: 10px;
left: 10px;
width: 20vw;
max-width: 250px;
min-width: 200px;
z-index: 9;
img {
width: 100%;
height: auto;
}
}Step 5) Now search for </body> and paste the below code just above it.
<!-- Buy me a coffee -->
<a class='suppoprt-me' href='YOUR_BMC_LINK_HERE' target='_blank'><img src='https://img.buymeacoffee.com/button-api/?text=Support&emoji=&slug=foxstack&button_colour=ff3859&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=FFDD00'/></a>
Remember to Replace YOUR_BMC_LINK in above code with Link to your BMC page. Your BMC page link will look something like this: https://www.buymeacoffee.com/foxstack. Also replace the slug=foxstack with slug=YOUR_USER_NAME in the above code where.
Step 6) Click on save and preview it.
Congrats 😀💫 you have successfully created your own button for your Buy me a coffee page.
You can play with the CSS to give this button a feel of your website.✌
If you face any problem or any error please do share it in comment box or else you can message me on instagram @_foxstack_
I'll see you all in next tutorial till then keep learning.