Cara Membuat Tombol Donasi Paypal Responsive di Blog Terbaru

Cara Membuat Widget Donasi Paypal Responsive di Blog - Pada kesempatan kali ini saya membagikan sebuah tutorial blogger Cara Membuat Tombol Donasi Paypal di Blog. Paypal adalah sebuah rekening online yang sudah banyak digunakan oleh orang dari seluruh dunia.

Memasang Widget Tombol Donasi Via Paypal di Blog merupakan sebuah cara untuk meraih penghasilan dari pengunjung blog anda yang mereka anggap anda layak untuk didonasi atas apa yang anda bagikan di blog anda.

Memasang widget Donasi pada blog biasanya mereka yang mmepunyai blog dan tidak menampilkan iklan untuk kenyaman para pengunjung, hal inilah yang biasanya banyak menggunakan widget donasi untuk meraih penghasilan.

Penghasilan tersebut terkadang untuk membayar sewa hosting maupun domain. Selain memasang widget donasi paypal anda juga bisa menggunakan metode donasi lainnya seperti Dana, OVO, Gopay dan lain sebagainya.

Pada artikel kali ini saya akan membagikan cara membuat wdiget donasi resposnive pada blog. Jadi jangan khawatir dengan memasang widget di blog anda, anda merasa berat. Tutorial ini saya hanya menggunakan CSS dan HTML saja.

Jadi jauh lebih ringan dan responsive pastinya, baiklah tidak perlu berlama-lama lagi mari langsung saja kita masuk ke tutorial membuat tombol donasi di blog.

Cara Membuat Kotak Donasi Resposnive di Blog

1. Pertama, Login ke Blogger.com

2. Pada Menu Dashboard pilih Tema > Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatas kode tersebut.

/* Dana Donation */
.imamkunblogdonasi {background:#438e68; /* 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:5px;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
.imamkunblogdonasi .ikon a {background-color:#033a84; color:#fff; text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; border: 1px solid;}
.imamkunblogdonasi svg {width:50px; height:50px}
.imamkunblogdonasi svg path {fill:#ffffff}
.imamkunblogdonasi .ikon {margin-right:15px}
.imamkunblogdonasi .deskripsi {line-height:1.5em;}
.imamkunblogdonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
.jagoan-donasi-pleaseeeee {display: inline-block;margin: 0;color: inherit;text-transform: uppercase;font-size: 16px;background: #ffffff;z-index: 1;position: relative;padding: 0 10px;font-weight: bold;margin-top: 3px;}

4. Selanjutnya menampatkan kode HTML di halaman blog anda.
5. Contoh disini saya akan memasang diatas Related Post.
6. Silahkan Cari tulisan Share this Post dan pada penutup kodenya tempatkan kode HTML berikut ini dibawah kode penutup tersebut.

<div class='imamkunblogdonasi'>
<div class='ikon'>
<a href='#Masukkan_URL_REKENING_PAYPAL_ANDA' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Disini Donasi via Paypal'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M10,20A1,1 0 0,1 9,21H4V3H13.71A6.75,6.75 0 0,1 20.46,9.75C20.46,13.5 17.44,16.5 13.71,16.5H10V20Z" />
</svg>
<span>KLIK</span>
</a>
</div>
<div class='deskripsi'>
<span class='judul'>DONASI VIA PAYPAL</span>
Jika Anda merasa menyukai blog ini dan ingin blog ini tetap ada, anda dapat menyalurkan donasi untuk perpanjang hosting atau domain kami! <b>www.imamkunblog.com</b>
</div>
</div>

7. Perhatikan beberapa hal beirkut ini

Silahkan ganti tulisan #Masukkan_URL_REKENING_PAYPAL ANDA dengan url rekening paypal kamu. Dan Ganti Keterangan dan lainnya silahkan menyesuaikan.

8. Jika sudah di edit dan disesuaikan dengan keinginan maka klik Simpan/Save.
9. Selesai
10. Lihat hasilnya!!

Seperti itulah membuat tombol donasi responsive di blog dengan mudah. Untuk demonya sendiri silahkan klik link berikut ini - Demo -

Baca Juga: Cara backup dan Import Semua data Blogger dengan Mudah

Demikianlah artikel kali ini Cara Membuat Tombol Donasi Via Paypal Responsive di Blog. Menurut anda bagaimana, bagu atau tidak? Jika ada yang ingin ditanyakan silahkan komentar dibawah ya, sekian dan terima kasih. wassalam!