Cara membuat kotak donasi seperti igniel di bawah postingan

Cara membuat kotak donasi seperti igniel di bawah postingan.png


Cara membuat kotak donasi seperti igniel di bawah postingan - hello sobat JagoanTekno, Kembali lagi dengan admin. Pada kesempatan kali ini saya akan membahas mengenai Cara membuat kotak donasi seperti igniel di bawah postingan, pada pembahasan sebelum saya sudah menjelaskan tentang Download Template Viomagz Amp Gratis.

Pada blog igniel kotak donasi nya masuk ke Paypal, tetapi pada pembahasan saya ini kotak donasi nya akan masuk ke OVO. Seperti yang kita ketahui OVO ini sangat bagus, dan sudah banyak menggunakan. Okeh simak saja dibawah ini sobat.

Cara membuat kotak donasi seperti igniel di bawah postingan.

Baca Juga : Download Template Viomagz Amp Gratis
  • Langkah pertama yang sobat lakukan adalah membuat halaman kotak donasi terlebih dahulu, sobat bisa buat pembukaan dan penutupan pada halaman kotak donasi tersebut. Seperti contoh dibawah ini.

  • Jika sudah membuat halaman kotak donasi, maka langkah selanjutnya adalah kalian menambahkan kode dibawah ini, lalu pasang di atas kode </b:skin>.

/* Paypal Donation Box Bounce by igniel.com */ .ignielDonasi {background:#bde0b9; /* warna background */ 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 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;} .ignielDonasi .ikon a {background-color:#008c5f; /* warna ikon */ color:#fff; text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:ignielBounce 1s linear 1s infinite normal; animation:ignielBounce 1s linear 1s infinite normal} .ignielDonasi svg {width:50px; height:50px} .ignielDonasi svg path {fill:#bde0b9} .ignielDonasi .ikon {margin-right:15px} .ignielDonasi .deskripsi {line-height:1.5em;} .ignielDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;} @keyframes ignielBounce{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 ignielBounce{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)} }

  • Setelah menambahkan kode tersebut, lalu langkah selanjutnya adalah kalian tambahkan kode dibawah ini, lalu pasang kode tersebut di bawah <data:post.body> atau <data:post.body/>. Kalo template kalian tidak ada <data:post.body> kalian bisa gunakan <data:post.body/>, tetapi <data:post.body/> harus dipasang yang terakhir karena <data:post.body/> ada 3 atau bahkan lebih.

 <!-- Paypal Donation Box Bounce by igniel.com --> <div class='ignielDonasi'> <div class='ikon'> <a href='https://www.jagoantekno.com/p/donasi-ovo.html?m=1' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via OVO'> <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'>DONASI VIA OVO</span> Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain <b><i>www.jagoantekno.com</i></b>. Terima kasih. </div> </div>

  • Jangan lupa ganti link tersebut dengan link blog sobat, jika sudah semua kalian bisa lihat hasil nya dengan membaca artikel sobat.
Itulah beberapa Cara membuat kotak donasi seperti igniel di bawah postingan, Nantikan post terbaru dari kami dan jangan lupa untuk dishare keteman sobat. TERIMAKASIH.

Penulis : Jejakdzgn

0 Response to "Cara membuat kotak donasi seperti igniel di bawah postingan"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel