Skip to main content

Membuat Widget Donasi Lengkap Semua Rekening Di Blogger

Membuat widget donasi di sebuah Blogger, merupakan cara ampuh supaya bisa mendapat tambahan penghasilan dari website/blog. Namun penghasilan yang didapat dari widget donasi yang dibuat para blogger tidak menentu, karena ini sifatnya sukarela yang diberikan oleh pengunjung blog anda. 

Jika anda ingin membuat widget donasi ala carangeblog.com , anda bisa membaca artikel ini dari awal sampai akhir.

Cara Membuat Widget Donasi Lengkap di Blogger: Panduan Mudah dan Praktis

Widget Donasi Lengkap Di Blogger
Blogger telah menjadi salah satu platform blogging paling populer di dunia, yang menawarkan kemudahan bagi para pengguna untuk membuat dan mengelola blog mereka. Sebagai seorang blogger, Anda mungkin pernah mempertimbangkan untuk menambahkan widget donasi di blog Anda, baik untuk mendukung biaya operasional atau mengajak pembaca berpartisipasi dalam kegiatan amal. Widget donasi di Blogger dapat menjadi solusi yang tepat untuk memudahkan pembaca memberikan dukungan finansial secara langsung.

Pada artikel ini, kami akan membahas cara membuat widget donasi lengkap di Blogger yang meliputi berbagai metode seperti Paypal, QRIS, dan transfer bank. Kami juga akan menjelaskan fungsi tombol donasi di Blogger, manfaat tombol donasi di Blogger, dan tentu saja, memberikan panduan lengkap tentang proses pembuatannya.

Mengapa Penting Memasang Widget Donasi di Blogger?

Sebelum memulai panduan, penting untuk memahami kenapa tombol donasi bisa menjadi bagian penting dari blog Anda. Berikut beberapa alasannya:

Mendukung Konten Berkualitas: 

Sebagai seorang blogger, menghasilkan konten yang berkualitas membutuhkan waktu dan usaha. Dengan adanya donasi, pembaca dapat menunjukkan apresiasi dan mendukung Anda untuk terus menghasilkan konten yang bermanfaat.

Sumber Penghasilan Alternatif: 

Selain iklan atau program afiliasi, widget donasi dapat menjadi sumber penghasilan alternatif. Hal ini sangat bermanfaat terutama bagi blogger yang tidak menginginkan banyak iklan di blognya.

Mendukung Kegiatan Amal: 

Jika blog Anda berfokus pada kegiatan sosial atau amal, tombol donasi memungkinkan pengunjung untuk langsung berkontribusi dalam kegiatan yang Anda jalankan.

Fungsi Tombol Donasi di Blogger

Widget donasi di Blogger memiliki beberapa fungsi penting yang dapat mendukung berbagai kebutuhan blog Anda, antara lain:

  • Memudahkan Pembaca Berdonasi: Dengan adanya tombol donasi, pembaca tidak perlu melakukan transfer manual. Mereka cukup klik tombol tersebut, lalu memilih metode pembayaran yang disediakan.
  • Meningkatkan Kredibilitas: Blog yang memiliki widget donasi biasanya dinilai lebih profesional karena menunjukkan bahwa si penulis atau pemilik blog berinvestasi dalam pembuatan konten.
  • Menjaga Keterlibatan Pembaca: Ketika pembaca merasa berkontribusi dalam mendukung blog favorit mereka, keterikatan emosional akan semakin kuat, yang pada gilirannya akan meningkatkan loyalitas pembaca.

Manfaat Tombol Donasi di Blogger

Selain fungsinya yang jelas, terdapat beberapa manfaat tombol donasi di Blogger yang dapat Anda rasakan, baik secara langsung maupun tidak langsung:

  • Pendapatan Tambahan: Seiring bertambahnya pengunjung setia, peluang untuk mendapatkan donasi secara konsisten juga meningkat. Ini menjadi alternatif sumber pendapatan bagi blogger selain dari iklan atau program afiliasi.
  • Menghindari Penggunaan Iklan Berlebihan: Tidak semua pembaca menyukai blog yang dipenuhi iklan. Dengan widget donasi, Anda bisa mengurangi jumlah iklan di blog tanpa mengorbankan pendapatan.
  • Kemandirian Finansial: Dengan tombol donasi, Anda tidak harus bergantung sepenuhnya pada pihak ketiga seperti platform iklan atau sponsor. Anda bisa langsung mendapatkan dukungan dari pembaca yang benar-benar menghargai konten Anda.
  • Dukungan untuk Proyek Khusus: Anda juga bisa menggunakan tombol donasi untuk mendukung proyek-proyek tertentu seperti penulisan buku, penelitian, atau pengembangan blog.

Panduan Lengkap Membuat Widget Donasi di Blogger

Sekarang, kita akan masuk ke bagian utama, yaitu cara membuat widget donasi lengkap di Blogger. Di sini, Anda akan mempelajari cara menambahkan berbagai metode pembayaran, seperti Paypal, QRIS, dan transfer bank.

Membuat Widget Donasi Paypal di Blogger

Paypal adalah salah satu platform pembayaran online yang paling populer dan aman di dunia. Berikut langkah-langkahnya:

Daftar Akun Paypal: 

Jika belum memiliki akun Paypal, kunjungi situs resmi Paypal dan daftar akun baru. Pastikan akun Anda terverifikasi agar bisa menerima pembayaran.   

Buat Tombol Donasi di Paypal:

  • Login ke akun Paypal Anda.
  • Pilih menu “Alat” lalu klik “Tombol Paypal.”
  • Pilih jenis tombol sebagai “Donasi.”
  • Sesuaikan pengaturan, seperti mata uang dan jumlah donasi, lalu salin url Paypal akun anda.

Membuat Widget Donasi dengan QRIS di Blogger

QRIS (Quick Response Code Indonesian Standard) memungkinkan pembayaran donasi dengan menggunakan dompet digital, sehingga sangat praktis bagi pengguna Indonesia.

Buat QRIS: 

Untuk mendapatkan kode QRIS, Anda bisa mendaftarkan diri di penyedia layanan seperti GoPay, OVO, atau ShopeePay yang mendukung QRIS. Anda akan diberikan kode QR yang bisa digunakan untuk menerima donasi. Ubah gambar qris anda menjadi link.

     <img src="LINK_GAMBAR_QRIS" alt="Donasi via QRIS">

   Simpan, dan link gambar kode QRIS yang sudah anda buat.

Membuat Widget Donasi dengan Transfer Bank di Blogger

Untuk pembaca yang lebih suka metode transfer bank, Anda bisa menambahkan informasi rekening di blog.

Tambahkan Informasi Rekening:

  • Siapkan informasi seperti nama bank, nomor rekening, dan atas nama.
  • Buka menu "Layout" di Blogger

Kode Widget Donasi Untuk Blogger 

Berikut adalah kode widget donasi yang perlu anda pasang di blogger:

Pasang Kode CSS Di Template Blogger 

Silahkan pasang kode CSS dibawah ini di pengaturan CSS template blogger anda.

.accordion {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            width: 100%;
            margin: 20px auto;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .accordion h2 {
            color: #1a2a44;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .accordion-item {
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        .accordion-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 10px;
            background-color: #f7f7f7;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .accordion-item-header:hover {
            background-color: #e0e0e0;
        }

        .accordion-item-header img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }

        .accordion-item-header span {
            font-size: 16px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .accordion-item-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 10px;
        }

        .accordion-item-content p {
            padding: 10px 0;
            margin: 0;
            color: #555;
        }

        .arrow {
            transition: transform 0.3s ease;
        }

        input[type="checkbox"] {
            display: none;
        }

        /* Ketinggian otomatis saat dicentang */
        input[type="checkbox"]:checked ~ .accordion-item-content {
            max-height: none; /* Menghilangkan batasan tinggi */
            overflow: visible; /* Memastikan konten yang diperluas ditampilkan */
        }

        input[type="checkbox"]:checked ~ .accordion-item-header .arrow {
            transform: rotate(90deg);
        }

        .copy-button {
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 14px;
        }

        .copy-button:hover {
            background-color: #0056b3;
        }

        .bank-card {
            display: flex;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
        }

        .logo-container {
            margin-right: 15px;
        }

        .bank-logo {
            width: 100px; /* Sesuaikan ukuran logo sesuai kebutuhan */
            height: auto;
        }

        .info-container {
            text-align: left;
        }

Pasang Javascript Di Template Blogger 

Selanjutnya anda pasang kode javascript dibawah ini sebelum kode </body> di pengaturan template blogger anda.
<!-- Script for copying account number -->
<script>
    function copyAccountNumber(accountNumber) {
        navigator.clipboard.writeText(accountNumber).then(() => {
            alert('Nomor rekening telah disalin: ' + accountNumber);
        }).catch(err => {
            console.error('Gagal menyalin: ', err);
        });
    }
</script>

Pasang Kode Html Widget Donasi Di Tata Letak Blogger Anda

Selanjutnya memasang kode html yang menampilkan tombol donasi di blogger anda. Pasang saja di tata letak Blogger anda diposisi manapun yang diinginkan.

<div class="accordion">
        <h2>Support CaraNgeblog.Com</h2>

        <!-- Accordion Item 1 -->
        <div class="accordion-item">
            <input type="checkbox" id="item-1" />
            <label class="accordion-item-header" for="item-1">
                <span><img src="https://i.ibb.co/v1NsJJP/paypal.png" alt="PayPal" />Donasi Paypal</span>
                <span class="arrow">&#9654;</span>
            </label>
            <div class="accordion-item-content">
                <p>Link donasi: <a href="https://www.paypal.com/paypalme/carangeblogdotcom">https://www.paypal.com/paypalme/carangeblogdotcom</a></p>
                <a class="button-keren" href="https://www.paypal.com/paypalme/carangeblogdotcom">Klik Disini</a>
            </div>
        </div>
        <!-- Accordion Item 2 -->
        <div class="accordion-item">
            <input type="checkbox" id="item-2" />
            <label class="accordion-item-header" for="item-2">
                <span><img src="https://i.ibb.co/17xwsxP/scanner.png" alt="QRIS" />Donasi via Qris</span>
                <span class="arrow">&#9654;</span>
            </label>
            <div class="accordion-item-content">
                <p>Mohon maaf, QRIS Mimin belum punya</p>
            </div>
        </div>
        <!-- Accordion Item 3 -->
<div class="accordion-item">
    <input type="checkbox" id="item-3" />
    <label class="accordion-item-header" for="item-3">
        <span><img src="https://i.ibb.co/jkRZbwr/bank.png" alt="Donate via Bank" />Donate via Bank</span>
        <span class="arrow">&#9654;</span>
    </label>
    <div class="accordion-item-content">
        <!-- Bank Cards -->
        <div class="bank-card">
            <div class="logo-container">
                <img src="https://i.ibb.co.com/xsgDPFz/images.jpg" alt="Logo Bank" class="bank-logo" />
            </div>
            <div class="info-container">
                <h2>Bank Seabank Indonesia</h2>
                <p><strong>Nomor Rekening:</strong> 901353934119</p>
                <p><strong>Nama Pemilik:</strong> MuslihUdin</p>
                <button class="copy-button" onclick="copyAccountNumber('901353934119')">Copy Nomor Rekening</button>
            </div>
        </div>
        <div class="bank-card">
            <div class="logo-container">
                <img src="https://i.ibb.co.com/FsJ7x6r/images.png" alt="Logo Bank" class="bank-logo" />
            </div>
            <div class="info-container">
                <h2>Bank BCA Digital Blu</h2>
                <p><strong>Nomor Rekening:</strong> 090115903020</p>
                <p><strong>Nama Pemilik:</strong> MuslihUdin</p>
                <button class="copy-button" onclick="copyAccountNumber('090115903020')">Copy Nomor Rekening</button>
            </div>
        </div>
        <div class="bank-card">
            <div class="logo-container">
                <img src="https://i.ibb.co.com/Ms84k73/images-1.png" alt="Logo Bank" class="bank-logo" />
            </div>
            <div class="info-container">
                <h2>Bank BSI</h2>
                <p><strong>Nomor Rekening:</strong> 7285343407</p>
                <p><strong>Nama Pemilik:</strong> MuslihUdin</p>
                <button class="copy-button" onclick="copyAccountNumber('7285343407')">Copy Nomor Rekening</button>
            </div>
        </div>
    </div>
</div>
<!-- Accordion Item 4 -->
        <div class="accordion-item">
            <input type="checkbox" id="item-4" />
            <label class="accordion-item-header" for="item-4">
                <span><img src="https://i.ibb.co.com/TrNxtYm/reward.png" alt="kopi" />About Donation</span>
                <span class="arrow">&#9654;</span>
            </label>
            <div class="accordion-item-content">
                <p>jika artikel yang di publikasikan di blog CaraNgeblog.Com 
Bermanfaat , 
Kamu Bisa Mendukung Dengan Berdonasi Seikhlasnya.
<br />
<br />
Jika Anda Berdonasi,
Saya Kedepannya Agar Lebih Semangat Lagi Menulis Artikel Yang Lebih Berkualitas Dan Bermanfaat.
<br />
<br />
Donasi Yang Anda Berikan Nantinya Akan Kami Menjadi Beberapa Bagian Seperti :
1. 20% Dari Total Donasi Yang Terkumpul Setiap Akhir Bulan
Akan Diberikan Kepada Yang Membutuhkan. Pemberian Berupa Makanan Gratis, Dll.
<br />
<br />
2. 30% Dana Donasi Yang Terkumpul Akan Diberikan Kepada Para Penulis Tamu CaraNgeblog.Com Yang Sudah Ambil Bagian Ikut Menyukseskan Dan Membagikan Tulisanya Yang Berkualitas Tinggi.
<br />
<br />
3. 50% Dana Donasi yang Terkumpul akan digunakan untuk perawatan blog CaraNgeblogDotCom seperti :
<br />
1. Biaya Tahunan Domain
2. Biaya Lainya Yang Berkepentingan Dengan CaraNgeblog.Com
</p>
            </div>
        </div>
    </div>

Anda bisa menyesuaikan kodenya berdasarkan fungsi donasi yang anda inginkan.

Membuat widget donasi di Blogger adalah langkah yang tepat untuk mendapatkan dukungan finansial dari pembaca Anda. Dengan menyediakan berbagai metode seperti Paypal, QRIS, dan transfer bank, Anda memudahkan pengunjung dalam memberikan donasi sesuai dengan preferensi mereka. Selain memberikan manfaat finansial, widget donasi juga dapat meningkatkan keterikatan pembaca dengan blog Anda.
Dengan mengikuti panduan lengkap cara membuat widget tombol donasi di Blogger ini, Anda kini dapat dengan mudah menambahkan opsi donasi dan mulai merasakan manfaatnya. Jadi, tunggu apa lagi? Segera pasang tombol donasi di blog Anda dan dapatkan dukungan untuk terus berkarya!

Jika kamu ingin melihat demo dari kode widget donasi di blogger ala cara ngeblog kamu bisa melihat tombol donasi milik carangeblog.com di akhir artikel ini.

Comments

Popular posts from this blog

Membuat Widget CV Generator Di Blogger

Cara Membuat Widget CV Lamaran Kerja Secara Otomatis di Blogger: Solusi untuk Generasi Z Banyak anggota Generasi Z saat ini menghadapi tantangan dalam melamar pekerjaan, terutama ketika mereka tidak memiliki Curriculum Vitae (CV) yang memadai atau tidak tahu cara membuat CV yang baik dan benar. Ini menjadi peluang emas bagi para blogger untuk membantu audiens yang tengah mencari solusi praktis dalam menyusun CV dengan mudah. Dengan membuat widget yang memungkinkan pembuatan CV secara otomatis, para konten kreator dapat memberikan nilai tambah bagi pengunjung blog mereka. Apa Itu Curriculum Vitae (CV)? Curriculum Vitae, sering disingkat CV, adalah dokumen penting yang merangkum riwayat hidup, pendidikan, pengalaman kerja, keterampilan, dan prestasi individu. CV sering digunakan dalam proses pencarian kerja sebagai alat untuk memberikan gambaran menyeluruh kepada calon pemberi kerja mengenai latar belakang profesional dan akademis seseorang.  Berikut adalah beberapa elemen kunci yang...

Memahami Title Link Enclosure Links Blogger

Panduan Lengkap Memahami dan Menggunakan Title Link serta Enclosure Links di Blogspot . Blogger atau Blogspot tetap menjadi salah satu platform blogging paling populer bagi pengguna di seluruh dunia. Meskipun platform ini menawarkan kemudahan penggunaan, banyak fitur tersembunyi yang jarang dimanfaatkan oleh para blogger. Dua fitur penting yang sering kali diabaikan adalah Title Link dan Enclosure Links . Keduanya memberikan fleksibilitas lebih dalam hal mengatur tampilan konten dan distribusi media di blog Anda. Dalam artikel ini, kita akan membahas secara mendetail tentang apa itu Title Link dan Enclosure Links , bagaimana cara menggunakannya, serta manfaat besar yang bisa didapatkan dari fitur-fitur ini di Blogspot. Anda juga akan belajar cara optimal menggunakannya untuk meningkatkan pengalaman pembaca dan SEO blog Anda. Apa Itu Title Link? Title Link adalah fitur di Blogspot yang memungkinkan Anda menghubungkan judul postingan blog dengan tautan eksternal atau internal. Biasanya,...

Hide Postingan Artikel Di Homepage Blogger Tanpa Code

Cara Menyembunyikan Postingan di Homepage Blogger Tanpa Otak-Atik Code Template. Di artikel sebelumnya saya juga sudah membahas cara menyembunyikan postingan artikel berdasarkan label tertentu di homepage Blogger Menggunakan kode kusus .  Mengelola tampilan postingan di homepage Blogger sering menjadi tantangan bagi pemilik blog yang ingin menjaga tampilan homepage tetap rapi atau menampilkan artikel tertentu saja. Biasanya Mungkin ini dilakukan karena blog yang dibuat biasanya mengangkat satu tema saja. Contohnya blog carangeblog.com yang mengangkat tema pembahasan seputar kode Blogger saja, namun saya ingin menulis artikel diluar tema blog supaya meningkatkan jumlah trafik organik di mesin pencarian google. Selain itu tujuanya supaya blog terlihat lebih rapih berdasarkan tema yang di angkat. Namun terkadang pemilik blog melakukan menyembunyikan postingan artikel di homepage Blogger mereka karena ada beberapa artikel yang sifatnya tidak terlalu relevan untuk ditampilkan di halama...