Apa Itu Tombol Donasi Blog ?

Kontak Donasi blogger adalah menu atau halaman dikususkan untuk memberikan sumbangan secara suka rela tanpa ada paksaan. Tampilan box donasi di blog yang dibagikan ini sangat simpel sederhana tampilanya keren tidak memberatkan loding saat membuka halaman Donasi dan tidak ada fitur lain yang terganggu.


Tampilan Donasi

Desain donasi dibuat dengan kode HTML script, JavaScript dan yang lainya. Tampilan donasi berbentuk persegi panjag atau menyesuikan tempat misal dibuat pada halaman blog atau postingan akan membentuk persegi pajang. Warna box donasi pelangi warna warni bergantian seperti lampu warna warni hiasan ruang kamar atau pada perayaan ulang tahun Indonesia 17 Agustus.

Pada tulisan Klik bawah logo love bisa diganti dengan link donasi seperti Dana, Paypal, Bank generate ke pesan Whatsapp dan dompet digital lainya.

Bila kalian tertatik ingin memasang pada blog Anda, silahkan gunakan kode dibawah ini dan ikuti langkah pemasanganya.

Cara Memasang Box Donasi di Blogger

1. Pertama Login di situs www.blogger.com
2. Setelah masuk di Dasbor Blogger pilih menu Halaman, lalu ubah ke mode HTML
3. Copy kode HTML donasi dibawah
<style>

.pscom{

    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);

    background-size: 500% 500%;

    -webkit-animation: pscom 12s ease infinite;

    -moz-animation: pscom 12s ease infinite;

    animation: pscom 12s ease infinite;

}

@-webkit-keyframes pscom {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@-moz-keyframes pscom {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@keyframes pscom {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

</style>

<style>

.penasharingDonasi { /* Warna Background */

  color:#ffffff;

  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 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;}

.penasharingDonasi .ikon a {background-color:#ffffff; /* Warna Ikon */

  color:#c10e0e;

  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:penasharingBounce 1s linear 1s infinite normal; animation:penasharingBounce 1s linear 1s infinite normal}

.penasharingDonasi svg {width:50px; height:50px}

.penasharingDonasi svg path {fill:#c10e0e}

.penasharingDonasi .ikon {margin-right:15px}

.penasharingDonasi .deskripsi {line-height:1.5em;}

.penasharingDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}


@keyframes penasharingBounce{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 penasharingBounce{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)}

}

</style>

<!-- Donation shaytekno.com-->

<div class='penasharingDonasi pscom'>

  <div class='ikon'>

    <a href='https://sociabuzz.com/suwandi639/tribe?locale.x=id_ID' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Buzz'>

      <svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></path></svg>

      <span>KLIK</span>

    </a>

  </div>

  <div class='deskripsi'>

    <span class='judul'>Traktir Ngopi Disini.!</span>

Merasa Terbantu Dengan artikel ini? Ayo Traktir Kopi Dengan Cara Berbagai Donasi. Terimakasih :)

  </div>

</div>
4. Paste kode yang sudah di copy tadi
5. Simpan, lalu lihat hasil dengan Preview

Semoga dengan adanya tutorial membahas Cara Membuat Tombol Donasi di Blog bermanfaat untuk Anda. Terima kasih sudah berkujung di www.onesiswa.com.