The coloured coffee cup and edge on the right side was supposed to make it stand out across the other material on the webpage. Sometimes people would be delighted to donate however, your donate button doesn't stand out to them. Also the large coffee cup which overlaps any component about it also helps.
There's not any set width with this component so simply drop it in your blogger side bar and it will be responsive to any size. Including mobile.
Let's add FontAwesome to the <head> of your website in case you don't already have it. This provides us the coffee cup at 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're adding it someplace else then you will need to include (max-width: 300px; into 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/yourpaypal" 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 us Edit it:
- Fa-coffee is your coffee cup on the left side. Find icons to use at fontawesome.com
- On that exact same line of code is (Purchase Me A Coffee) you can alter this to say anything you prefer.
- Next you need to put this to your PayPal account. Change: https://www.paypal.me/yourpaypal for your: (PayPal.me) username.)
- Then (Your Donations Help Us Grow) with all the emoji face. You can change this to say anything you like. Also if you would like to utilize a different emoji you can just copy the URL of almost any emoji found here: Android Emoji's
<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>If you need to edit:
- .sbframe This line adjusts the shadow round the exterior, the blue border colour on the right, the radius of the corners along with the background color.
- Span.fa.fa-coffee Use this line to change the color of your FontAwesome Icon.
- .buycoffee Use This line to change the size and style of this BUY ME A COFFEE text.
- #sbdonates2 Use this line to switch the boundary, size and kind of the Donate button.
- .sbnerd finally this will change the dimensions on the Emoji.
---------------------------------------------------------------
Widget Created By Mike Coleman
Founder of Spadesberry
Revised By: Keino(L.Lewis.O)
Founder of Mr. Bwashe/MS
No comments:
Post a Comment