 |
| Tampilan Widget conversi mata uang asing ke mata uang asing milik hallomadiun.com |
hallo semua,pada kesempatan kali ini kami akan membagikan tutorial CARA MEMASANG WIDGET MATA UANG DI BLOGGER. widget konversi mata uang asing ini sangat cocok untuk anda yang kemungkinan sedang membuat blog mengenao convert mata uang asing ke rupiah di platfrom blogspot kamu.
Tutorial Membuat Tools Conversi Mata Uang Asing ke Rupiah di Blogspot
Dalam era globalisasi saat ini, transaksi keuangan internasional menjadi hal yang lumrah. Baik untuk keperluan bisnis, traveling, atau sekadar mengetahui nilai tukar mata uang, memiliki alat konversi mata uang yang akurat dan mudah digunakan sangatlah penting. Nah, bagaimana jika Anda bisa membuat tools konversi mata uang asing ke Rupiah (IDR) sendiri dan mempublikasikannya di blog Anda? Artikel ini akan membahas langkah-langkah detail untuk membuat tools tersebut menggunakan HTML, JavaScript, dan API ExchangeRate, serta cara mengintegrasikannya ke dalam platform Blogger.
Apa Itu Widget Konversi Mata Uang?
Tools konversi mata uang adalah alat digital yang memungkinkan pengguna untuk mengubah nilai suatu mata uang ke mata uang lainnya berdasarkan kurs yang berlaku. Misalnya, Anda ingin tahu berapa Rupiah yang setara dengan 100 USD. Dengan tools ini, Anda bisa mendapatkan jawabannya secara instan.
Membuat widget konversi mata uang sendiri memiliki beberapa keuntungan:
1. Kustomisasi: Anda bisa menyesuaikan tampilan dan fitur sesuai kebutuhan.
2. Kontrol Data: Anda memiliki kendali penuh atas data yang digunakan.
3. Nilai Tambah untuk Blog: Tools ini bisa menjadi fitur menarik yang meningkatkan engagement pengunjung blog Anda.
Langkah-Langkah Membuat Widget Konversi Mata Uang Asing DI blogger
Berikut adalah panduan lengkap untuk membuat tools konversi mata uang asing ke Rupiah menggunakan HTML, JavaScript, dan API ExchangeRate.
1. Persiapan Alat dan Bahan
Sebelum memulai, pastikan Anda memiliki:
Akun Blogger: Untuk mempublikasikan tools.
API Key dari ExchangeRate-API: Daftar di [ExchangeRate-API](https://www.exchangerate-api.com/) untuk mendapatkan API key gratis yang berfungsi untuk menjalankan widget konversi mata uang asing di blogger kamu.
Editor Teks: Seperti Notepad++, Visual Studio Code, atau editor teks online.
Membuat Kode HTML dan JavaScript Conversi mata Uang Asing Di Blogger
Berikut adalah kode lengkap untuk membuat tools konversi mata uang:
anda bisa memasangnya dimanapun pada blogspot anda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter to IDR</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
Verifikasi reCAPTCHA
Tentang Donasi
Widget Donasi Adalah Widget Yang diperuntukan untuk pengunjung website HalloMadiun.Com Yang Ingin Membagikan Sedikit Rejekinya Untuk Para Penulis Di Website Hallo Madiun
Dana Donasi yang terkumpul setiap bulanya akan di bagi menjadi beberapa bagian.
Seperti :
● Membayar Keperluan Website Hallo Madiun Seperti
1. Domain
2. Hosting
3. Internet
4. paket premium Desain
● Memberikan Bantuan Sembako Kepada Para Pebulis Di Hallo Madiun Yang Senantiasa Gigih Memberikan Informasi Terupdate Seputar Madiun Dan Sekitarnya Di Website Ini.
● Sisa Dana Yang Masih Tersisa Setiap Bulanya Akan Di Simpan Dalam Dana Kas Website Hallo Madiun.
Bank Kesejahteraan Ekonomi / Seabank
Bank Seabank Indonesia
Nomor Rekening: 901353934119
Nama Pemilik: M*********N
Blu Bca / Bca Digita
Bank DIGITAL BCA
Nomor Rekening: 007596829387
Nama Pemilik: M*********N
Gopay
Gopay
Nomor: 0895405964539
Nama Pemilik: M*********N
QRIs
QRIS
Scan QR di aplikasi pembayaran untuk berdonasi.
PayPal
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, select, button {
margin: 10px 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007BFF;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Currency Converter to IDR By <a href="https://hallomadiun.com">HalloMadiun.Com</h1>
<input type="number" id="amount" placeholder="Amount" min="0">
<select id="currency">
<option value="USD">US Dollar (USD)</option>
<option value="EUR">Euro (EUR)</option>
<option value="GBP">British Pound (GBP)</option>
<option value="JPY">Japanese Yen (JPY)</option>
<option value="SGD">Singapore Dollar (SGD)</option>
<!-- Tambahkan mata uang lain sesuai kebutuhan -->
</select>
<button onclick="convertCurrency()">Convert to IDR</button>
<div class="result" id="result"></div>
</div>
<script>
async function convertCurrency() {
const amount = document.getElementById('amount').value;
const currency = document.getElementById('currency').value;
const apiKey = 'YOUR_API_KEY'; // Ganti dengan API key Anda
const apiUrl = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${currency}`;
if (amount <= 0) {
alert('Please enter a valid amount');
return;
}
try {
const response = await fetch(apiUrl);
const data = await response.json();
if (data.result === 'success') {
const rate = data.conversion_rates.IDR;
const convertedAmount = (amount * rate).toFixed(2);
document.getElementById('result').innerText = `${amount} ${currency} = ${convertedAmount} IDR`;
} else {
document.getElementById('result').innerText = 'Error fetching exchange rates';
}
} catch (error) {
document.getElementById('result').innerText = 'Error converting currency';
}
}
</script>
</body>
</html>
Menambahkan Widget Konversi Mata Uang Asing ke Blogspot
Setelah kode selesai, ikuti langkah-langkah berikut untuk mempublikasikannya di Blogger:
1. Login ke Blogger: Masuk ke akun Blogger Anda.
2. Buat Postingan atau Halaman Baru: Pilih opsi "Postingan Baru" atau "Halaman Baru".
3. Beralih ke Mode HTML: Di editor postingan, klik tombol "HTML" untuk beralih ke mode kode.
4. Tempel Kode: Salin dan tempel kode HTML dan JavaScript di atas ke dalam editor.
5. Ganti API Key: Jangan lupa mengganti `YOUR_API_KEY` dengan API key yang Anda dapatkan dari ExchangeRate-API.
6. Publikasikan: Simpan dan publikasikan postingan atau halaman tersebut.
Cara Mendapatkan Api Key exchangerate-api.com
untuk m3ndapatkan api key di exchangerate-api.com berikut adalah langkah-langkahnya:
1. kunjungi webiste exchangerate-api.com kemudian masukan alamat email aktif anda untuk mendapatkan api key dari exchangerate-api.com secara gratis.
2. jika anda belum memiliki akun exchangerate-api.com maka anda akan otomatis di arahkan ke menu pendaftaran. anda tinggal memasukan alamat email dam sandi akun exchangerate-api.com anda.
3. nantinya kamu akan mendapatkan email yang berisi link verifikasi. anda tinggal klik link verifikasinya dan otomatis anda akan mendapatkan api key secara gratis tanpa batas.
4. swtelah anda mendapatkan api key exchangerate-api.com anda tinggal memasangnya pada kode yang sudab kami berikan di atas.
Optimasi SEO untuk Tools Konversi Mata Uang Di Blogger
Agar tools Anda mudah ditemukan oleh pengunjung, lakukan optimasi SEO dengan cara berikut:
Judul yang Menarik: Gunakan judul seperti "Konversi Mata Uang Asing ke Rupiah Secara Instan".
Deskripsi Meta: Tambahkan deskripsi meta yang menjelaskan fungsi tools.
Kata Kunci: Gunakan kata kunci seperti "konversi mata uang", "kurs Rupiah", atau "alat konversi mata uang".
Konten Pendukung: Tambahkan artikel atau penjelasan tentang pentingnya mengetahui nilai tukar mata uang.
Manfaatkan Tools Mata Uang Asing Di Blog untuk Meningkatkan Traffic
Tools konversi mata uang bisa menjadi daya tarik tersendiri bagi blog Anda. Beberapa manfaatnya antara lain:
Meningkatkan Engagement: Pengunjung akan lebih lama berada di blog Anda.
Meningkatkan Reputasi: Blog Anda akan dianggap sebagai sumber informasi yang bermanfaat.
Peluang Monetisasi: Anda bisa menambahkan iklan atau affiliate link terkait keuangan.
Membuat tools konversi mata uang asing ke Rupiah di Blogger tidaklah sulit. Dengan menggunakan HTML, JavaScript, dan API ExchangeRate, Anda bisa membuat alat yang bermanfaat bagi pengunjung blog Anda. Selain itu, tools ini juga bisa menjadi nilai tambah untuk meningkatkan traffic dan engagement blog Anda. Jadi, tunggu apa lagi? Segera buat tools konversi mata uang Anda sendiri dan rasakan manfaatnya!
Dengan mengikuti tutorial ini, Anda tidak hanya mendapatkan alat yang berguna, tetapi juga meningkatkan kualitas blog Anda. Selamat mencoba!
Rate This Article
Thanks for reading: Membuat Tools Conversi Mata Uang Asing ke Rupiah di Blogger, Sorry, my English is bad:)