Ini adalah script HTML sederhana yang dirancang khusus agar tampil rapi di postingan atau halaman statis Blogger (Blogspot).
Script ini menggunakan **Bootstrap 5** (via CDN) agar tampilannya modern dan responsif di HP maupun desktop.
Script ini menghitung HPP (Harga Pokok Penjualan) dengan rumus standar UMKM:
### Cara Memasang di Blogger:
1. Masuk ke Dashboard Blogger.
2. Pilih **Halaman** atau **Postingan** baru.
3. Ubah mode tampilan dari **Tampilan Menulis** ke **Tampilan HTML** (ikon pensil di kiri atas).
4. *Copy-paste* seluruh kode di bawah ini:
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background-color: #f8f9fa; padding: 20px; font-family: sans-serif; }
.kalkulator-hpp { max-width: 500px; margin: auto; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.hasil-box { display: none; margin-top: 20px; padding: 15px; border-radius: 10px; background-color: #e9ecef; }
.btn-hitung { background-color: #007bff; color: white; width: 100%; font-weight: bold; }
</style>
</head>
<body>
<div class="kalkulator-hpp">
<h4 class="text-center mb-4">Kalkulator HPP UMKM</h4>
<div class="mb-3">
<label class="form-label">Persediaan Awal (Rp)</label>
<input type="number" id="awal" class="form-control" placeholder="Stok barang di awal bulan">
</div>
<div class="mb-3">
<label class="form-label">Pembelian Barang Baru (Rp)</label>
<input type="number" id="pembelian" class="form-control" placeholder="Total belanja stok">
</div>
<div class="mb-3">
<label class="form-label">Biaya Angkut Masuk (Rp)</label>
<input type="number" id="ongkir" class="form-control" value="0">
</div>
<div class="mb-3">
<label class="form-label">Persediaan Akhir (Rp)</label>
<input type="number" id="akhir" class="form-control" placeholder="Sisa stok di akhir bulan">
</div>
<button onclick="hitungHPP()" class="btn btn-hitung">Hitung HPP</button>
<div id="hasilArea" class="hasil-box text-center">
<span class="text-muted">Total Harga Pokok Penjualan:</span>
<h3 id="totalHPP" class="text-primary mt-2">Rp 0</h3>
</div>
</div>
<script>
function hitungHPP() {
// Ambil Nilai Input
const awal = parseFloat(document.getElementById('awal').value) || 0;
const pembelian = parseFloat(document.getElementById('pembelian').value) || 0;
const ongkir = parseFloat(document.getElementById('ongkir').value) || 0;
const akhir = parseFloat(document.getElementById('akhir').value) || 0;
// Rumus: (Awal + Pembelian + Ongkir) - Akhir
const hpp = (awal + pembelian + ongkir) - akhir;
// Tampilkan Hasil
const formatRupiah = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
}).format(hpp);
document.getElementById('totalHPP').innerText = formatRupiah;
document.getElementById('hasilArea').style.display = 'block';
}
</script>
</body>
</html>
```
### Penjelasan Singkat Komponen:
* **Persediaan Awal:** Nilai barang yang masih ada di rak/gudang saat periode baru dimulai.
* **Pembelian Barang:** Total uang yang dikeluarkan untuk membeli stok dagangan baru.
* **Biaya Angkut:** Seringkali UMKM lupa memasukkan ongkir pembelian ke dalam modal, padahal ini bagian dari HPP.
* **Persediaan Akhir:** Nilai barang yang tersisa dan belum laku saat periode berakhir.
Script menghitung HPP
![Script menghitung HPP]()
Reviewed by Chandra, SKM
on
April 11, 2026
Rating:
Tidak ada komentar: