Share Code widget Donate Paypal cho Blogger

Code này nhớ hồi đợt mình chôm của blog nào bên nước ngoài xong về mình edit lại chút xíu màu với lại SVG awesome. Nay có mấy bạn nhắn tin bên Page xin code nên mình viết bài share lên đây luôn!

Share Code widget Donate Paypal cho Blogger

Thật ra cái widget này có cmj khó đâu, anh em view code là lấy được rồi, chẳng qua nhìn hiệu ứng nhảy nhảy nhún nhún là thấy thích mắt tí hoy kaka.

Code widget Donate Paypal cho Blogger

- Bố cục > add HTML/Javascript (thường ở Sideba hoặc dưới Footer).

- Dán toàn bộ code sau vào Widget:

<!-- Paypal Donation Box -->
<div class="penasharingDonasi pscom" role="region" aria-label="Donate">
  <div class="ikon">
    <a href="https://www.paypal.com/paypalme/anhtrainang"
       target="_blank" rel="noopener noreferrer"
       aria-label="Donate via PayPal">
      <svg aria-hidden="true" width="50" height="50" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path fill="#0D47A1" d="M174.225,303.616c1.76-11.04,11.328-19.2,22.624-19.2h47.04c92.448,0,164.8-37.248,185.952-144.992
          c0.64-3.2,1.632-9.344,1.632-9.344c6.016-39.872-0.032-66.912-21.76-91.456C385.842,11.584,342.642,0,287.378,0H126.993
          c-11.296,0-20.896,8.16-22.688,19.2L37.522,439.392c-1.312,8.288,5.152,15.776,13.6,15.776h99.008l24.864-156.48L174.225,303.616z
          M243.889,312.704h-42.176L170.225,512h68.416c9.888,0,18.304-7.136,19.84-16.832l0.8-4.224l15.744-98.912l1.024-5.44
          c1.536-9.696,9.952-16.832,19.808-16.832h12.512c80.864,0,144.16-32.576,162.656-126.816c7.424-37.824,3.84-69.536-14.496-92.448
          C433.554,256.576,360.242,312.704,243.889,312.704z"/>
      </svg>
      <span>Click</span>
    </a>
  </div>
  <div class="deskripsi">
    <span class="judul">Donate PayPal</span>
    Ủng hộ phát triển site bằng 1 ly cà phê nếu được nhé. Cảm ơn anh em!
  </div>
</div>
<style>
.pscom{
  --g1:#3c5b9a; --g2:#4f7bd6; --g3:#39b5e4;
  background: linear-gradient(45deg, var(--g1), var(--g2), var(--g1), var(--g3), var(--g1), var(--g3), var(--g1));
  background-size: 500% 500%;
  animation: pscom 12s ease infinite;
}
@keyframes pscom{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.penasharingDonasi{
  color:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:15px;
  padding:15px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  border-radius:7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.penasharingDonasi .ikon a{
  background-color:#fff;
  color:#c10e0e;
  text-decoration:none;
  display:block;
  padding:6px 8px;
  border-radius:7px;
  text-align:center;
  animation: penasharingBounce 1.2s linear 1s infinite;
  will-change: transform;
}
.penasharingDonasi .ikon a:hover{
  transform: translateY(-1px);
}

.penasharingDonasi svg{
  display:block;
  width:50px; height:50px;
}
.penasharingDonasi .deskripsi{ line-height:1.6; }
.penasharingDonasi .deskripsi .judul{
  font-size:18px;
  font-weight:700;
  display:block;
  margin-bottom:8px;
}

@keyframes penasharingBounce{
  0%,100% { transform: scale3d(1,1,1); }
  30%     { transform: scale3d(1.18,.86,1); }
  45%     { transform: scale3d(.86,1.18,1); }
  60%     { transform: scale3d(1.08,.92,1); }
  75%     { transform: scale3d(1.03,.97,1); }
}

@media (prefers-reduced-motion: reduce){
  .pscom{ animation: none; }
  .penasharingDonasi .ikon a{ animation: none; }
}
</style>
  

- Thay https://www.paypal.com/paypalme/anhtrainang thành link Paypal của các bạn hoặc link gì các bạn điều chỉnh cho phù hợp.

- Thay awesome chỗ chữ <path ... />

- Ngoài làm nút Paypal các bạn có thể làm nhiều nút khác bằng cách sửa font awesome và nội dung cho phù hợp.

Demo

Click

Donate PayPal Ủng hộ phát triển site bằng 1 ly cà phê nếu được nhé. Cảm ơn anh em!

Lời kết

Bên trên là Code widget Donate Paypal cho Blogger. Các bạn có thể tự tùy biến để sử dụng theo ý thích cũng như là nội dung riêng của mình.

Chúc các bạn thành công!