Sebagai seorang Blooger yang kreatif dan Inovatif serta berjiwa Sosial dalam membagikan berbagai aneka informasi dan pengetahuan secara geratis tanpa adanya syarat dan ketentuan bagi pengunjung adalah suatu hal yang sangat mulia. Di indonesia sendiri banyak sekali ya blogger yang memposting aneka informasi dan ilmu pengetahuan kepada publik, sehingga untuk menambah wawasan bagi masyarakat umum untuk saat ini menjadi sangat mudah dengan rajin berselancar di dunia maya.
Termasuk blog-blog yang membagikan aneka tutorial atau solusi atas suatu masalah yang biasanya dihadapi di tengah kehidupan masyarakat. Meskipun ada juga blog yang membagikan Tutorial atau solusi atas masalah dengan syarat ketentuan, contohnya paling banyak blog Tutorial Service Handphone yang membagikan sofware dengan cara memberikan locked pasword pada file yang dibagikannya dan harus membayar dengan uang dengan jumlah tertentu apabila ingin mendapatkan Locked Paswordnya file Rar.
Bagi kalian yang suka berbagi ilmu pengetahuan secara geratis khususnya di bidang Tutorial Sofware, membuat Kotak Donasi pada halaman postingan Blog mungkin menjadi suatu hal yang perlu dicoba. Barang kali ada salah satu pengunjung yang merasa mendapatkan manfaat, tertolong dan puas dengan apa yang telah kita bagikan, kemudian timbul dalam hatinya untuk memberikan suatu hal sebagai ucapakan terima kasih selain dari kata atau ucapan terima kasih gan saja.
DOWNLOAD SOUCE CODE KOTAK DONASI CREATED BY IGNIEL
Pertama-tama Buka Dasboard Blogger, pilih menu Tema kemudian pilih Edit HTML
Cari kode atau </Style> atau kode ]]></b:skin> agar lebih mudah dan cepat dalam pencarian gunakan filture pencarian dengan cara tekan kombinasi tombol keyboard CTRL + F. Jika salah satu dari ke-2 kode di atas sudah kalian temukan, pastekan kode CSS berikut ini tepat di atasnya.
/* 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 itu cari kode
<data:post.body/>
Setelah kalian temukan pastekan kode berikut ini dibawahnya. Biasanya terdapat lebih dari satu kode dalam HTML Template. Pilih hasil pencarian urutan terakhir atau kalian bisa mencoba menempatkan kode di bawah ini secara berganti untuk melakukan uji coba penempatan.
<!-- Pulsa Donation Box Bounce by igniel.com -->
<div class='ignielDonasi'>
<div class='ikon'>
<a href='https://www.telkomsel.com/transfer-pulsa' 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 ICON LOVE</span>
</a>
</div>
<div class='deskripsi'>
<span class='judul'>DONASI PULSA TELKOMSEL</span>
Jika dirasa Memberikan Manfaat, Bantu Suport Dengan Berdonasi Pulsa. Donasi akan digunakan untuk Pembelian Paket Data Pengelolaan Blog <b><i>www.berbagitutorialonline.com</i></b>. Terima kasih.
</div>
</div>
Kalian dapat memodifikasi kode diatas sesuai keinginan misalnya donasi berupa Paypal atau Bitcoint. Kode diatas jgua dapat dipasang sebagai widget HTML/Java Script.
Klick Simpan untuk menerapkan, dan coba kalian test dengan membuka salah satu dari postingan yang telah kalian publikasikan. Sebagai contoh hasil penerapannya kalian bisa melihatnya pada akhir postingan ini akan muncul Kotak Donasi Pulsa, maka dari itu jangan lupa ya Sobat Blogger donasi Pulsa Seikhlasnya ke Admin untuk uji coba he...he.
Ketika pengjung ingin melakukan donasi dan Klick Icon Love maka secara otomatis akan dibawa ke halaman Website Transfer Pulsa Telkomsel.
Demikianlah Tutorial Cara Membuat Kotak Donasi Pulsa Pengunjung Blog pada Area Bagian Akhir Postingan. Semoga bermanfaat dan terima kasih telah berkunjung.