Kalkulator Zakat Online – Hitung Zakat dengan Mudah!

Menghitung zakat kini lebih mudah dengan Kalkulator Zakat berbasis HTML, CSS, dan JavaScript ini! Alat ini memungkinkan Anda untuk menghitung zakat fitrah dan zakat mal secara cepat dan akurat berdasarkan jumlah jiwa, harga beras, total harta, dan nisab emas.

Fitur Utama:

✅ Zakat Fitrah – Hitung jumlah zakat berdasarkan jumlah jiwa dan harga beras terkini.
✅ Zakat Mal – Kalkulasi otomatis berdasarkan total harta, hutang jatuh tempo, dan harga emas per gram.
✅ Interaktif & Mudah Digunakan – UI responsif yang bekerja di semua perangkat.
✅ Gratis & Open Source – Bisa diunduh dan dimodifikasi sesuai kebutuhan Anda.

<style>
    .container_zakat {
            width: 100%;
            max-width: 400px;
            background: #ffffff;
            padding: 20px;
            
            text-align: center;
        }
@media (max-width: 600px) {
    .container_zakat {
        max-width: 100%;
        width: 100%;
        padding: 15px; /* Opsional: agar tidak terlalu mepet di layar */
    }
}
        .tabs {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #ddd;
            margin-bottom: 15px;
        }
        .tab {
            flex: 1;
            padding: 10px;
            cursor: pointer;
            font-weight: bold;
            color: #555;
            text-align: center;
            background: #eee;
        }
        .tab.active {
            background: #007bff;
            color: #fff;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        label {
            font-weight: 600;
            display: block;
            margin-top: 10px;
            color: #555;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
        }
        button {
            width: 100%;
            padding: 12px;
            margin-top: 15px;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.3s;
            background: #007bff;
            color: #fff;
        }
        button:hover {
            background: #0056b3;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }
        .info {
            font-size: 12px;
            color: #777;
            margin-top: -5px;
        }
</style>
<div class="container_zakat">
    <div class="tabs">
        <div class="tab active" onclick="switchTab('fitrah')">Zakat Fitrah</div>
        <div class="tab" onclick="switchTab('mal')">Zakat Mal</div>
    </div>

    <div id="fitrah" class="tab-content active">
        <h3>Kalkulator Zakat Fitrah</h3>
        <label for="jumlahJiwa">Jumlah Jiwa</label>
        <input type="number" id="jumlahJiwa" value="1">

        <label for="hargaBeras">Harga Beras per Kg (Rp)</label>
        <input type="number" id="hargaBeras" value="15000">

        <button onclick="hitungZakatFitrah()">Hitung Zakat</button>
        <div id="resultFitrah"></div>
    </div>

    <div id="mal" class="tab-content">
        <h3>Kalkulator Zakat Mal</h3>
        <p class="info">Total harta mencakup tabungan, investasi, emas, properti, dan aset likuid lainnya.</p>

        <label for="totalHarta">Total Harta (Rp)</label>
        <input type="number" id="totalHarta" value="0">

        <label for="hutang">Hutang Jatuh Tempo (Rp)</label>
        <input type="number" id="hutang" value="0">

        <label for="hargaEmas">Harga Emas per Gram (Rp)</label>
        <input type="number" id="hargaEmas" value="1000000" oninput="updateNisab()">

        <label for="nisab">Nisab (85 gram emas) (Rp)</label>
        <input type="number" id="nisab" value="85000000" readonly>

        <button onclick="hitungZakatMal()">Hitung Zakat</button>
        <div id="resultMal"></div>
    </div>
</div>
<script>
    function switchTab(tab) {
        document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));

        document.querySelector('.tab[onclick="switchTab(\'' + tab + '\')"]').classList.add('active');
        document.getElementById(tab).classList.add('active');
    }

    function hitungZakatFitrah() {
        let jumlahJiwa = parseInt(document.getElementById("jumlahJiwa").value);
        let hargaBeras = parseInt(document.getElementById("hargaBeras").value);
        let totalZakat = jumlahJiwa * 2.5 * hargaBeras;

        document.getElementById("resultFitrah").innerHTML = `
            <p>Total Zakat Fitrah yang harus dibayar: <strong>Rp ${totalZakat.toLocaleString('id-ID')}</strong></p>
            <p>Atau <strong>${jumlahJiwa * 2.5} kg</strong> beras</p>
        `;
    }

    function updateNisab() {
        let hargaEmas = parseInt(document.getElementById("hargaEmas").value);
        document.getElementById("nisab").value = hargaEmas * 85;
    }

    function hitungZakatMal() {
        let totalHarta = parseInt(document.getElementById("totalHarta").value);
        let hutang = parseInt(document.getElementById("hutang").value);
        let nisab = parseInt(document.getElementById("nisab").value);
        let hartaBersih = totalHarta - hutang;

        if (hartaBersih >= nisab) {
            let zakat = hartaBersih * 2.5 / 100;
            document.getElementById("resultMal").innerHTML = `
                <p>Harta Bersih: <strong>Rp ${hartaBersih.toLocaleString('id-ID')}</strong></p>
                <p>Zakat Mal yang harus dibayar: <strong>Rp ${zakat.toLocaleString('id-ID')}</strong></p>
            `;
        } else {
            document.getElementById("resultMal").innerHTML = `
                <p>Harta bersih Anda belum mencapai nisab, tidak wajib zakat.</p>
            `;
        }
    }
</script>

Cara Penggunaan:

1. Zakat Fitrah:
   • Masukkan jumlah jiwa yang akan membayar zakat.
   • Input harga beras per kg sesuai standar daerah Anda.
   • Klik tombol “Hitung Zakat” dan lihat hasilnya dalam rupiah dan kilogram beras.
2. Zakat Mal:
   • Masukkan total harta (tabungan, investasi, emas, properti, dll.).
   • Masukkan hutang yang jatuh tempo.
   • Masukkan harga emas per gram untuk menghitung nisab.
   • Klik “Hitung Zakat” dan lihat apakah harta Anda sudah wajib zakat serta jumlah yang harus dibayarkan.

Kini Anda bisa menambahkan Kalkulator Zakat langsung ke website WordPress Anda menggunakan shortcode! Dengan shortcode ini, pengunjung bisa menghitung zakat fitrah dan zakat mal secara otomatis berdasarkan jumlah jiwa, harga beras, total harta, dan nisab emas.

Cara Penggunaan Shortcode:

1. Instalasi:
   • Tambahkan kode PHP berikut ke dalam file functions.php tema atau buat plugin sendiri.
2. Gunakan Shortcode:
   • Masukkan [kalkulator_zakat] di dalam postingan atau halaman WordPress Anda.

[pms-restrict]

function kalkulator_zakat_shortcode() {
    ob_start(); ?>
    <style>
        .container_zakat {
            width: 100%;
            max-width: 400px;
            background: #ffffff;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 600px) {
            .container_zakat {
                max-width: 100%;
                width: 100%;
                padding: 15px;
            }
        }
        .tabs {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #ddd;
            margin-bottom: 15px;
        }
        .tab {
            flex: 1;
            padding: 10px;
            cursor: pointer;
            font-weight: bold;
            color: #555;
            text-align: center;
            background: #eee;
        }
        .tab.active {
            background: #007bff;
            color: #fff;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        label {
            font-weight: 600;
            display: block;
            margin-top: 10px;
            color: #555;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
        }
        button {
            width: 100%;
            padding: 12px;
            margin-top: 15px;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.3s;
            background: #007bff;
            color: #fff;
        }
        button:hover {
            background: #0056b3;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }
        .info {
            font-size: 12px;
            color: #777;
            margin-top: -5px;
        }
    </style>
    <div class="container_zakat">
        <div class="tabs">
            <div class="tab active" onclick="switchTab('fitrah')">Zakat Fitrah</div>
            <div class="tab" onclick="switchTab('mal')">Zakat Mal</div>
        </div>
        <div id="fitrah" class="tab-content active">
            <h3>Kalkulator Zakat Fitrah</h3>
            <label for="jumlahJiwa">Jumlah Jiwa</label>
            <input type="number" id="jumlahJiwa" value="1">
            <label for="hargaBeras">Harga Beras per Kg (Rp)</label>
            <input type="number" id="hargaBeras" value="15000">
            <button onclick="hitungZakatFitrah()">Hitung Zakat</button>
            <div id="resultFitrah"></div>
        </div>
        <div id="mal" class="tab-content">
            <h3>Kalkulator Zakat Mal</h3>
            <p class="info">Total harta mencakup tabungan, investasi, emas, properti, dan aset likuid lainnya.</p>
            <label for="totalHarta">Total Harta (Rp)</label>
            <input type="number" id="totalHarta" value="0">
            <label for="hutang">Hutang Jatuh Tempo (Rp)</label>
            <input type="number" id="hutang" value="0">
            <label for="hargaEmas">Harga Emas per Gram (Rp)</label>
            <input type="number" id="hargaEmas" value="1000000" oninput="updateNisab()">
            <label for="nisab">Nisab (85 gram emas) (Rp)</label>
            <input type="number" id="nisab" value="85000000" readonly>
            <button onclick="hitungZakatMal()">Hitung Zakat</button>
            <div id="resultMal"></div>
        </div>
    </div>
    <script>
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
            document.querySelector('.tab[onclick="switchTab(\'' + tab + '\')"]').classList.add('active');
            document.getElementById(tab).classList.add('active');
        }
        function hitungZakatFitrah() {
            let jumlahJiwa = parseInt(document.getElementById("jumlahJiwa").value);
            let hargaBeras = parseInt(document.getElementById("hargaBeras").value);
            let totalZakat = jumlahJiwa * 2.5 * hargaBeras;
            document.getElementById("resultFitrah").innerHTML = `
                <p>Total Zakat Fitrah: <strong>Rp ${totalZakat.toLocaleString('id-ID')}</strong></p>
                <p>Atau <strong>${jumlahJiwa * 2.5} kg</strong> beras</p>`;
        }
        function updateNisab() {
            let hargaEmas = parseInt(document.getElementById("hargaEmas").value);
            document.getElementById("nisab").value = hargaEmas * 85;
        }
        function hitungZakatMal() {
            let totalHarta = parseInt(document.getElementById("totalHarta").value);
            let hutang = parseInt(document.getElementById("hutang").value);
            let nisab = parseInt(document.getElementById("nisab").value);
            let hartaBersih = totalHarta - hutang;
            if (hartaBersih >= nisab) {
                let zakat = hartaBersih * 2.5 / 100;
                document.getElementById("resultMal").innerHTML = `
                    <p>Harta Bersih: <strong>Rp ${hartaBersih.toLocaleString('id-ID')}</strong></p>
                    <p>Zakat Mal: <strong>Rp ${zakat.toLocaleString('id-ID')}</strong></p>`;
            } else {
                document.getElementById("resultMal").innerHTML = "<p>Harta belum mencapai nisab, tidak wajib zakat.</p>";
            }
        }
    </script>
    <?php return ob_get_clean();
}
add_shortcode('kalkulator_zakat', 'kalkulator_zakat_shortcode');

[/pms-restrict]

Jadikan perhitungan zakat lebih praktis dan akurat dengan Kalkulator Zakat ini! 🚀