Cara Membuat Kotak Donasi Paypal Seperti Blog Igniel

Saya lihat-lihat, cukup banyak para blogger pemula yang bertanya mengenai cara membuat kotak donasi via paypal seperti blog Igniel. Menurut saya sih wajar, karena kotak donasi tersebut terlihat bagus jika dilihat-lihat. Karena banyak yang ingin tahu cara membuatnya, sekalian saja saya berikan sedikit Tutorial pembuatannya untuk kalian semua.

Untuk membuat kotak donasi paypal ini, tentunya kamu harus memiliki akun paypal terlebih dahulu. Jika tidak punya, kamu bisa buat sendiri akun paypal baru.

Sebenarnya Tutorial ini sudah pernah di tuliskan di blog Igniel sendiri, tapi tidak ada salahnya jika Tutorial tersebut saya tulis ulang di blog saya sendiri. Untuk kamu yang ingin tahu bagaimana cara membuatnya, silahkan langsung baca saja tutorialnya berikut ini.

Cara Membuat Kotak Donasi Paypal Seperti Igniel

Cara Membuat Kotak Donasi Paypal Seperti Blog Igniel

1. Silahkan buat username baru terlebih dahulu di PayPal.Me

2. Setelah itu silahkan buka Dashboard Blogger, pilih template dan klik Edit HTML.

3. Silahkan kamu cari kode berikut ini </style> atau ]]></b:skin> dan tempel kode CSS di bawah ini tepat diatasnya.
/* 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)} }
4. Lalu cari lagi kode berikut ini <data:post.body/> dan tempel kode HTML di bawah ini tepat dibawahnya.
<!-- Paypal Donation Box Bounce by igniel.com --> <div class='ignielDonasi'> <div class='ikon'> <a href='https://www.paypal.me/xxxx' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");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'>DONASI VIA PAYPAL</span> Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain <b><i>www.nadatazkia.com</i></b>. Terima kasih. </div> </div>
Keterangan: silahkan ganti url paypal.me dan ganti juga tulisannya sesuak dengan keinginan masing-masing.

5. Jika sudah, kamu bisa langsung klik simpan untuk melinyimpan Script/kode yang ditambahkan tadi.

Jadi itulah sedikit Tutorial Cara Membuat Kotak Donasi Paypal Seperti Igniel, saya harap kalian suka. Owh iya, kode yang saya berikan diatas adalah kode yang asli berasal dari Blog igniel.

Tetap kunjungi terus blog ini agar bisa mendapatkan semua informasi terbaru yang saya tuliskan disini, dan jangan lupa juga untuk share artikel ini ke semua temanmu. Semoga bermanfaat!

0 Response to "Cara Membuat Kotak Donasi Paypal Seperti Blog Igniel"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel