MASIGNCLEAN102

Donate Gadget - PayPal

Donate Gadget for BloggerDonate buttons help bloggers and websites grow as Ads don't always work when your new.
I have seen many styles of donate button on the web but wanted one that looked clean and moderate so i designed this one myself and i hope you can enjoy it on with your Blog or Website.

Buy Me A Coffee Coffee cup full of coffee
DONATE With PayPal blue logo
Your Donations Help Us Growsmile emoji with glasses
paypal loading image
The colored coffee cup and border on the right side was to make it stand out over the other content on the page. Sometimes people would be happy to donate but your donate button doesn't stand out to them. Also the big coffee cup that overlaps any element about it also helps :)

There is no set width with this element so just drop it in your blogger side bar and it will be responsive to any size. Including mobile.
Copy The Full Code To Clipboard
Also feel free to send a donation if you want more content like this.
  • Instructions and Editing
Let's add FontAwesome to the <head> of your site if you don't already have it.
This gives us the coffee cup in the left corner and many other options.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML: Now you can just paste this in your side bar gadget. If you are adding it somewhere else then you will need to add (max-width: 300px;) to the (.sbframe) style seen below.
<div class="sbframe"/>
<span class="fa fa-coffee"></span><span class="buycoffee">Buy Me A Coffee</span> <img class="sbbigcup" src="https://drive.google.com/uc?id=1nTYHli9VEqeh4BcZxLyBhdbmLIl5XlY6" alt="Coffee cup full of coffee"/> <center class="sbpplink"><a href="https://www.paypal.me/spadesberry" target="_blank" id="sbdonates2">DONATE WITH <img class="sbpplogo" src="https://drive.google.com/uc?id=1XYmVXoLnqsTo_VmeQRY03lHbZl7mfEPH" alt="PayPal blue logo"/></a></center> <center class="sbhelpus">Your Donations Help Us Grow<img class="sbnerd" src="https://drive.google.com/uc?id=1s6w00WLVBIVZ4Ptzuc9LtATyVodwb-vH" alt="smile emoji with glasses"/></center></div>
Let's Edit it:
1. fa-coffee is the coffee cup on the left side. Find icons to use at fontawesome.com
2. On that same line of code is (Buy Me A Coffee) you can change this to say anything you like.
3. Next you need to set this to your PayPal account. Change: https://www.paypal.me/spadesberry to your: (PayPal.me) username.
4. Last is (Your Donations Help Us Grow) with the emoji face. you can change this to say anything you like. Also if you would like to use a different emoji you can just copy the URL of any emoji found here: Android Emoji's
CSS: Last is to add the styles. You can paste this with the HTML or drop it right into your sites CSS File.
<style>
.sbframe {    
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    border-right: 3px solid #0ea9f4;
    border-radius: 8px;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Roboto',sans-serif;
    background-size: 320px;
    background-color:#fff;}
span.fa.fa-coffee {
    color: #0fa9f4;
    font-size: 18px;
    margin-right: -5px;
    padding-left: 6px;
    padding-top: 5px;}
.buycoffee {font-style: oblique;
    font-size: 10px;
    padding-left: 5px;}
.sbbigcup {    margin-top: -50px;
    margin-bottom: -50px;
    float: right;}
  .sbpplink {padding-top: 7px;
    padding-bottom: 10px;}
.sbpplogo {width: 60px;
    margin-bottom: -4px;}
#sbdonates2 {
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;margin-right:30px;font-size:14px;
    background-color:#fff;}
#sbdonates2:hover {color:#444; background-color:#eee !important; box-shadow:0 -1px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}
.sbhelpus {font-size: 9px;
    font-style: oblique;
    margin-bottom: -16px;}
.sbnerd {width: 16px;
    padding-left: 5px;
    margin-bottom: -4px;}
</style>
Let's Edit it:
.sbframe This line adjusts the shadow around the outside, the blue border color on the right, the radius of the corners and the background color.
span.fa.fa-coffee Use this line to change the color of your FontAwesome Icon.
.buycoffee This line to change the style and size of the BUY ME A COFFEE text.
.sbpplink This line will change the spacing around the Donate button.
#sbdonates2 Use this line to change the border, size and style of the Donate button.
.sbhelpus This line to change the style and size of the YOUR DONATIONS HELP US GROW text.
.sbnerd And this on will change the size on the Emoji.
And That's it. Your done. Comment below if you need help.

Thanks for stopping by. smile emoji
Please view our Terms of Use before using for any type of commercial use.
avatar

I like the invitation "buy me a coffee", it's so simple and up front.

May 10, 2018, 9:39:00 AM
avatar

interesting concept and the coffee sure caught my attention so maybe that's how it works.

May 11, 2018, 1:24:00 AM
avatar

Love this! Need one for WP!

May 16, 2018, 2:10:00 PM
avatar

I've never used WordPress. Can you not just copy the code? I can look into this if needed w)

May 16, 2018, 5:27:00 PM
Thanks for being you! Come back for more great stuff monkey emoji
bell notification