|
Fineshop Design telah merilis versi terbaru dari produk unggulannya, Plus UI v2.6. Jika sebelumnya kita sudah akrab dengan versi sebelumnya, Plus UI v2.5.1, kini saatnya untuk menyambut fitur-fitur baru yang membuat pengalaman pengguna semakin memikat.
Dalam versi terbaru ini, Plus UI membawa inovasi dengan menampilkan Postingan Blog secara real time, dan semuanya bisa diakses dengan bantuan Firebase Database. Mari kita bahas langkah-langkah untuk mengaktifkan fitur menarik ini pada blog Anda.
Sebelum memulai, pastikan Anda telah memperbarui template UI Anda ke versi 2.6 yang terbaru. Anda bisa mengunduh versi terbarunya disini.
Fitur ini tidak akan berfungsi optimal jika digunakan pada versi yang lebih lama. Jadi, perbarui segera dan kita siap untuk melangkah ke tahap selanjutnya.
Syarat yang Dibutuhkan:
1. Akun Firebase: Pastikan Anda memiliki akun Firebase untuk dapat mengintegrasikan fitur Real Time pada blog Anda.
2. Template UI v2.6 yang Diperbarui: Pastikan template UI Anda telah diperbarui ke versi terbaru agar dapat memanfaatkan fitur-fitur baru yang ditawarkan.
Langkah 1: Membuat Proyek di Firebase
Pertama-tama, mari buat proyek baru di Firebase. Langkah ini diperlukan untuk mengaktifkan koneksi antara blog Anda dan Firebase.
Buatlah proyek dengan memberikan nama yang sesuai dengan blog Anda. Pastikan untuk mengikuti petunjuk Firebase dalam proses pembuatan proyek ini.
Langkah 2: Membuat Database untuk Proyek Anda
Setelah proyek Firebase Anda terbuat, langkah selanjutnya adalah membuat database. Database ini akan menjadi tempat penyimpanan data yang akan ditampilkan secara waktu nyata pada blog Anda.
Pilih jenis database yang sesuai dengan kebutuhan proyek Anda. Firebase menyediakan beberapa opsi, termasuk Realtime Database dan Cloud Firestore.
Langkah 3: Menyusun Rules Database
Sekarang, mari kita tambahkan aturan pada database Firebase. Ini memastikan bahwa data yang ditampilkan sesuai dengan keinginan Anda.
Tempel Rules ini untuk blog tunggal:
{
"rules": {
".read": true,
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
}
}
}
Atau tempel Rules ini untuk beberapa blog:
{
"rules": {
".read": true,
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
},
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
},
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
}
}
}
Aturlah aturan database dengan bijak, pastikan untuk mengganti BlogID_0000000000000000000 dengan informasi spesifik dari blog ID Anda.
Langkah 4: Menyalin URL Basis Data
Setelah aturan ditambahkan, salin URL Basis Data Firebase Anda. URL ini nantinya akan digunakan untuk menghubungkan template blog dengan database.
Salin URL dengan hati-hati dan pastikan tidak ada kesalahan. URL inilah yang menghubungkan blog Anda dengan Firebase.
Langkah 5: Buka Editor HTML Tema
Sekarang, buka editor HTML tema blog Anda. Ini adalah langkah kunci untuk mengintegrasikan Firebase dengan template blog.
Jika belum familiar dengan editor HTML, pastikan untuk membaca panduan atau tutorial yang mungkin disediakan oleh platform blog Anda.
Langkah 6: Menemukan dan Menyesuaikan Kode Tema
Temukan kode berikut untuk menampilkan postingan blog. Ini adalah langkah penting untuk memastikan bahwa data yang diambil dari Firebase dapat ditampilkan dengan benar.
realViews: {
databaseUrl: "",
abbreviation: "false"
}
Jangan ragu untuk mencari bantuan jika merasa kebingungan. Ada komunitas yang besar di luar sana siap membantu.
Langkah 7: Menyematkan URL Database
Tempelkan URL Basis Data yang sudah Anda salin pada langkah sebelumnya ke dalam kode tema. Maka hasilnya akan terlihat seperti contoh di bawah ini:
realViews: {
databaseUrl: "https://example-rtdb.firebaseio.com",
abbreviation: "false"
}
Pastikan untuk menyematkan URL dengan benar. Kesalahan kecil pun bisa membuat koneksi terputus.
Langkah 8: Menyimpan Perubahan
Terakhir, simpan perubahan yang telah Anda lakukan pada editor HTML tema, dan segarkan halaman blog Anda. Sekarang, blog Anda sudah siap untuk menampilkan postingan secara Real time!
Jangan lupa untuk menyimpan perubahan dan melihat hasilnya dengan merefresh halaman blog.
Menampilkan Jumlah Penayangan yang Disingkat:
Selain menampilkan postingan secara real time, Plus UI v2.6 juga membawa fitur menarik lainnya.
Jika Anda tertarik untuk menampilkan jumlah penayangan dalam format angka yang disingkat, yaitu 15.27K daripada 15276, Anda bisa mengikuti langkah-langkah berikut.
1. Temukan kode menampilkan jumlah penayangan berikut ini.
realViews: {
databaseUrl: "",
abbreviation: "false"
}
2. Ganti nilai 'false' dengan 'true' untuk menampilkan angka yang disingkat.
realViews: {
databaseUrl: "",
abbreviation: "true"
}
Ini adalah opsi menarik untuk membuat tampilan blog lebih ringkas dan modern. Jangan ragu untuk bereksperimen dengan opsi lain yang ditawarkan oleh template UI ini.
Terakhir, simpan perubahan dan refresh halaman blog Anda. Sekarang, blog Anda tidak hanya menampilkan postingan secara waktu nyata tetapi juga memberikan tampilan yang lebih bersih dan terorganisir untuk jumlah penayangan.
Dengan demikian, Plus UI v2.6 membawa pengalaman pengguna blog ke level berikutnya. Dengan mengikuti langkah-langkah di atas, Anda dapat mengaktifkan fitur-fitur keren ini dan menjadikan blog Anda lebih interaktif dan menarik bagi para pembaca. Jadi, tunggu apa lagi? Segera perbarui template UI Anda dan rasakan perbedaannya sekarang!