How to Create a Donation Widget Below Blogger Articles

How to Create a Donation Widget Below Blogger Articles. This time I want to share a little tutorial about blogging which is very much sought after by the people of Vrindavan like you, hehe I'm joking, friend I also use it myself.

The source code of this widget I took from Igniel's blog because there is no need to use javascript which will burden the loading of post pages on your friend's blog. So, don't worry and don't ask if this widget can affect the speed of the blog or not, of course, keep running as long as your blog is speeding up.

You just need to add the HTML and CSS code to be implemented. We strongly recommend that you do Minified CSS in the code so that there are no shortcomings that cause the page loading will be hampered as in previous cases I experienced.

Ok, let's go straight to how to apply it so as not to procrastinate and make you bored.

How to Create a Donation Widget Below Blogger Articles

Before applying this tutorial, make sure you have a backup of the template that you are using to avoid bad things that happen such as errors and others.

1. Please login to Blogger.com first
2. On the dashboard page, select the Themes menu> Edit HTML
3. Then insert the following CSS code directly above the code ]]></b:skin>

   /* Donate Widget */
   .telecomyaarDonation{background:#E7E8E8;color:#000;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;flex-wrap:nowrap;justify-content:center;margin:20px 0;display:flex;padding:15px;overflow:hidden;transition:all .3s ease;border-radius:7px}.telecomyaarDonation .ikon a{background-image:linear-gradient(50deg,#5067C5,#B0569C);color:#fff;text-decoration:none;display:block;padding:5px;border-radius:7px;text-align:center;-webkit-animation:telecomyaarBounce 1s linear 1s infinite normal;animation:telecomyaarBounce 1s linear 1s infinite normal}.telecomyaarDonation svg{width:50px;height:50px}.telecomyaarDonation svg path{fill:#fff}.telecomyaarDonation .ikon{margin-right:15px}.telecomyaarDonation .deskripsi{text-align:justify;font-size:14px;line-height:1.5em}.telecomyaarDonation .deskripsi .judul{font-size:15px;font-weight:600;display:block;margin-bottom:10px}@keyframes fernnBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@-webkit-keyframes fernnBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}

4. We have minified the CSS code above, so you only need to add it directly to the template.
5. Then enter the following HTML code just below the <data: post.body/> code

   <div class='telecomyaardonation'>
     <div class='ikon'>
       <a href='#' onclick='window.open(this.href,&quot;toolbar=0,status=0,width=800,height=600&quot;);return false;' title='Click To Donate via Paypal'>
         <svg viewbox='0 0 24 24'><path d='M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z'/></svg>
       </a>
     </div>
     <div class='deskripsi'>
       <span class='judul'>DONATE BLOG</span>
       Help the admin to develop this blog to be even better, your donation is only intended for the benefit of the blog only.
     </div>
   </div>

6. Save the Theme and see the results.

If you do the tutorial above correctly then the result will be the same as in this blog which is right below the article.

Maybe that's the first post from How to Make a Donation Widget Below Blogger Articles, hopefully always useful. Thank you.