Halo Semuanya, Kali ini Saya akan membagikan Tutorial Cara Membuat Widget untuk Mengupload Gambar Di Blogger, Widget ini memiliki Fungsi untuk Mengupload Gambar dan Mendapatkan Tautan untuk Mengakses Filenya.
Membuat Project Di Google Firebase
Untuk Memulai, Anda harus Membuat Satu Project (Projek) Di Google Firebase. Untuk Caranya, Anda dapat Melihatnya Dibawah.
1. Masuk ke Dashboard Google Firebase Menggunakan Akun Google Anda.
2. Lalu Anda dapat Mengeklik Create a Project untuk Membuat Projek baru.
3. Masukkan Nama Project Sesuai Keinginan Anda.
4. Lalu pada Step Google Analytics for you Firebase Project, Klik Lanjutkan (Contiune).
5. Pada Bagian Step Configure Google Analytics, Pilih Akun Google Firebase Anda lalu Klik Create Project.
6. Kemudian Tunggu dan jika Sudah muncul Your new project is ready, Maka sudah Selesai dan klik Contiune.
Membuat Aplikasi Baru
Anda harus Membuat Aplikasi Baru pada Project Google Firebase Anda.
1. Pada Bagian Get started by adding Firebase to your app Klik Aplikasi Web </>
2. Pada Bagian Register app, Masukkan Nama Aplikasi sesuai Keinginan Kalian.
3. Pada Bagian Add Firebase SDK, Anda akan Melihat Kode untuk Penyiapan Aplikasi, Salin Kode pada Bagian const firebaseConfig dan Simpan Kode tersebut Di Notepad atau Tempat Catatan lainnya untuk Digunakan Nanti, Kode yang Disalin akan Terlihat seperti ini:
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
Menyiapkan Cloud Storage
Untuk Menampung Gambar, Anda harus Membuat Menyiapkan Cloud Storage.
1. Pada bagian kiri Dashboard, Pilih Build dan klik Menu Storage dan klik Tombol Get Started.
2. Pada bagian Step Set up Cloud Storage dan bagian Secure rule for Cloud Storage Pilih Start in production mode.
3. Pada bagian Set Cloud Storage location, Anda dapat Memilih Lokasi Cloud Storage Sesuai Keinginan Anda. Lalu Klik Done dan Tunggu Beberapa Saat.
Setelah Penyiapan Cloud Storage telah Selesai, Lanjut ke Tutorial Berikutnya.
Mengatur Aturan untuk Cloud Storage
Aturan atau Rules Berfungsi untuk Mengatur Siapa saja yang dapat Melihat (Read) dan Mengupload (Write) File pada Cloud Storage Anda.
1. Setelah Penyiapan Cloud Storage Selesai, Pergi ke Menu Rules.
2. Lalu Ganti Aturan (Rules) Bawaan menjadi Aturan berikut:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
Aturan ini akan Mengizinkan semua Orang untuk Melihat (Read) dan Mengupload (Write) Gambar pada Cloud Storage Anda.
Lalu Anda dapat Menyimpan Perubahan Aturan dan Lanjut ke Tutorial Berikutnya.
Lanjut ke Dashboard Blogger
1. Masuk ke Dashboard Blogger.
2. Pada Dashboard Blogger, Klik Halaman.
3. Lalu klik Buat Halaman.
4. Ubah Mode Editor menjadi Tampilan HTML lalu Tempel Kode Berikut.
<label for="fileInput" class="custum-file-upload">
<div class="icon">
<svg viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z" fill=""></path> </g></svg>
</div>
<div class="text">
<span>Upload Gambar Disini</span>
</div>
<input id="fileInput" type="file" accept="image/*">
</label>
<div id='ImageURLInp' style='display:none'>
<input id='imageUrl' type='text' readonly/>
</div>
<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>
<style>
/* Image Upload Widget */ .custum-file-upload{height:200px;max-width:100%;display:flex;flex-direction:column;align-items:space-between;gap:20px;cursor:pointer;align-items:center;justify-content:center;border:2px dashed #e8e8e8;background-color:transparent;padding:1.5rem;border-radius:10px}.custum-file-upload .icon,.custum-file-upload .text{display:flex;align-items:center;justify-content:center}.custum-file-upload .icon svg{height:80px!important;width:80px!important;fill:#08102b}.custum-file-upload .text span{font-weight:400;color:#08102b}.custum-file-upload input{display:none}.drK .custum-file-upload .icon svg{fill:#fffdfc}.drK .custum-file-upload .text span{color:#fffdfc} #ImageURLInp{margin-top:20px} #imageUrl{width:100%}
/* Toast Notification by Fineshop */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
</style>
<!--[ Firebase App (core SDK) ]-->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!--[ Firebase Storage ]-->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-storage.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
function uploadFile() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
if (!file) {
console.warn('Please select a file first.');
document.getElementById('toastNotif').innerHTML = '<span>Pilih Gambar untuk Di Upload</span>';
return;
}
// Reference to a location in Storage
var storageRef = storage.ref();
var fileRef = storageRef.child(file.name);
// Upload file
var uploadTask = fileRef.put(file);
uploadTask.on('state_changed', function(snapshot) {
// File upload process
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '%');
document.getElementById('toastNotif').innerHTML = '<span>Progress telah Mencapai '+progress+' %</span>';
}, function(error) {
// Error Handling
console.error('Upload failed:', error);
document.getElementById('toastNotif').innerHTML = '<span>Upload Gagal dengan Kesalahan: '+error+'</span>';
}, function() {
// Upload successful
uploadTask.snapshot.ref.getDownloadURL().then(function(url) {
document.getElementById('ImageURLInp').style.display = "block";
document.getElementById('imageUrl').value = url;
document.getElementById('toastNotif').innerHTML = '<span>Gambar Berhasil Di Upload</span>';
console.log('File available at', url);
});
});
}
// Change Text to File Name
document.getElementById('fileInput').addEventListener('change', function() {
const fileName = this.files[0].name;
document.querySelector('.custum-file-upload .text span').textContent = fileName;
uploadFile();
});
</script>
Jangan Lupa untuk Mengganti Bagian yang Ditandai, yaitu:
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
Menjadi Kode yang telah Anda Salin dan Simpan Sebelumnya.
Lalu Anda dapat Mengatur Beberapa Kode yang Diperlukan dan Mempublikasikan Halaman.
Selesai, Sekarang Anda dapat Mencoba Widget ini dan Melihat Hasilnya.
Penutup
Jadi Ini Adalah Postingan yang Membahas Tentang Cara Membuat Widget untuk Mengupload Gambar Di Blogger. Saya harap Artikel ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.