For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat donasi box via Paypal keren diblogger

Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai widget blogger untuk membuat sebuah kotak donasi atau donasi box keren dan responsif tentunya

Fungsi

Seperti yang kita ketahui kotak donasi diblog digunakan untuk menampilkan suatu informasi bagi para pengunjung untuk melakukan sebuah donasi, semisal no rekening dan lainnya

Biasanya kotak donasi disertakan sebuah link yang membawa pengunjung untuk melakukan transaksi pengiriman dana, atau juga kotak donasi biasa digunakan hanya sekedar untuk membuat tampilan baru didalam blog sehingga pengunjung tidak akan merasa bosan

Dibuat menggunakan CSS

Sebagai informasi untuk anda bahwa kotak donasi ini dibuat menggunakan kode CSS untuk membuat tampilan donasi box nya, sehingga blog anda tidak akan mengalami kehambatan saat blog dimuat ulang

Info: Dengan unsur CSS yang dipakai maka bisa dibilang bahwa kode untuk membuat kotak donasi ini sangatlah responsif dan baik untuk digunakan

Penggunaan Animasi CSS

Oh iya kotak donasi ini juga disertai atau menggunakan kode dari animasi CSS untuk membuat tampilan kotak donasi anda semakin menarik tentunya

Info: Jika sudah penasaran yuk langsung aja kita bahas bagaimana caranya membuat kotak donasi blog

Cara pembuatan

Baiklah sekarang kita akan mulai memasuki dan membahas mengenai cara pembuatan kotak donasi keren diblogger, disimak baik baik oke

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkan diatas atau sebelum kode ]]<>/b:skin<

.icloudice-donasi {background:#f80000; /* warna background */ color:#fff;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;}
.icloudice-donasi .ikon a {background-color:#fff; /* warna ikon */color:#f80000;text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:icloudiceBounce 1s linear 1s infinite normal; animation:icloudiceBounce 1s linear 1s infinite normal}
.icloudice-donasi svg {width:50px; height:50px}
.icloudice-donasi svg path {fill:#f80000}
.icloudice-donasi .ikon {margin-right:15px}
.icloudice-donasi .deskripsi {line-height:1.5em;} 
.icloudice-donasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
@keyframes icloudiceBounce{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 icloudiceBounce{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)}
}

Info: Kamu bisa menyesuaikan tampilan warna background dan juga textnya

Kode HTML

Setelah kamu menyimpan kode CSS yang telah saya jabarkan diatas, selanjutnya anda bisa menyalin kode dibawah ini, kemudian letakkin sesuai keinginan kamu

<div class='icloudice-donasi'>
  <div class='ikon'>
    <a href='https://www.paypal.me/icloudice' onclick='window.open(this.href,&quot;toolbar=0,status=0,width=800,height=600&quot;);return false;' title='Klik Untuk Donasi via Paypal'>      <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'/></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>Support Me</span>
Bantu berikan donasi jika artikel icloudice dirasa bermanfaat <b> Terima kasih.</b>
  </div>
</div>

Info: Disini kamu bisa mengubah informasi text, link sosmed, dan Lainnya, sesuaikan menurut keinginan bkamu aja

Peletakkan kode HTML

Jika kamunya masih bingun pengen letakkin kode HTML nya dimana, kamu bisa mencari kode <data:post.body/> dan letakkan tepat dibawah kode tersebut

Info: Ingat ya setiap template blog itu berbeda beda, jadi cari kode tersebut secara perlahan-lahan oke

Contoh demo

Jika masih belum yakin dengan kode yang saya jabarkan diatas, kamu bisa melihat contoh demo dari tampilan kotak donasinya seperti dibawah ini

Support Me Bantu berikan donasi jika artikel icloudice dirasa bermanfaat
Terima kasih.

Info: Bagaimana sobat dengan tampilan donasi boxnya, keren bukan, oke jumpa lagi pada artike saya yang lainnya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.