Doc Dashblogger Pro v1.3

Pertama-tama, pastikan kamu sudah memiliki projek, database dan web app yang aktif dan kosong. Jika belum punya, kamu bisa ikuti langkah-langkah di bawah ini.

Tahap 1 - Membuat Project, Database dan Authentication Firebase Baru

Simak video di bawah ini untuk membuat project, database, web app dan authentication Firebase.

Jika pemutaran video dirasa terlalu cepat, kamu bisa unduh video terlebih dahulu kemudian edit pemutaran video.

Step Tambahan (WAJIB):

Buka project yang sudah dibuat.

Masuk ke menu Authentication Settings Authorized domains Add domain. Setelah itu masukkan alamat domain blog kamu.

Setiap kali kamu ingin menginstal fitur login di blog baru, kamu wajib menambahkan domain blog baru ke daftar authorized domains di Firebase Authentication agar script dapat berfungsi.

Tahap 2 - Memasang Script Rules Database Firebase

Tahap 3 - Memasang CSS Variable di Blog

Tahap 4 - Memasang Script Cek Status Login User

var igneliusLoginJS = {
  lisensiKey: "MASUKKAN_KODE_LISENSI_DISINI", // GANTI BAGIAN INI DENGAN KODE LISENSI KAMU
  logoutSukses: "Berhasil logout!",
  logoutGagal: "Gagal logout!",
  loginPage: "/p/login.html"
};

var firebaseConfig = {
  /* GANTI SEMUA BAGIAN INI DENGAN FIREBASE CONFIG KAMU */
};

Update Dashblogger Pro v1.1

Versi baru telah tersedia. Di versi terbaru ini kamu dapat menuliskan data-data profil user menggunakan elemen HTML. Tapi sebelum itu, pastikan kamu sudah melakukan update script pada file cek-status-login-user.xml. Untuk melakukan update, silakan unduh file produk versi terbaru melalui halaman produk kemudian buka file bernama cek-status-login-user.xml. Pada bagian kode JavaScript, salin semua kodenya dan ganti semua JavaScript cek status login yang lama dengan script baru yang sudah disalin tadi. Berikut adalah contoh script cek status login user sebelum dan sesudah update:

// SCRIPT VERSI LAMA
function cekStatusLogin(){firebase.auth().onAuthStateChanged(o=>{o&&o.emailVerified?(document.querySelectorAll(".isLogin").forEach(o=>{o.style.display="block"}),document.querySelectorAll(".notLogin").forEach(o=>{o.style.display="none"})):(document.querySelectorAll(".isLogin").forEach(o=>{o.style.display="none"}),document.querySelectorAll(".notLogin").forEach(o=>{o.style.display="block"}))})}function logoutUser(){firebase.auth().signOut().then(()=>{alert(igneliusLoginJS.logoutSukses),localStorage.removeItem("loggedInUser"),window.location.href=igneliusLoginJS.loginPage}).catch(()=>{alert(igneliusLoginJS.logoutGagal)})}window.onload=cekStatusLogin;

// SCRIPT VERSI BARU
function igneliusGlobalJS(e){var i=document.createElement("script");i.type="text/javascript",i.src="https://cdn.jsdelivr.net/gh/ignelius/libs@main/widget/blogger/produk/dashblogger-pro/cek-status-log.js",i.async=!0,i.defer=!0,i.onload=function(){e&&e()},document.head.appendChild(i)}igneliusGlobalJS(function(){});

Menulis Data Profil User

Setelah berhasil mengupdate script cek status login, kamu bisa menuliskan data-data profil user seperti nama, email, nomor telepon dan data lainnya di postingan menggunakan elemen HTML. Salin semua kode HTML di bawah ini kemudian letakkan di dalam postingan atau halaman di mana kamu ingin menampilkan data profil user.

<!--[ elemen untuk menampilkan foto profil user ]-->
<img class="userProfil" src="" alt="Foto Profil" width="100">
<p>Nama: <span class="data-name">-</span></p>
<p>Email: <span class="data-email">-</span></p>
<p>Telepon: <span class="data-phone">-</span></p>
<p>Masa Aktif: <span class="data-expired">-</span></p>
<p>Status Premium: <span class="data-premiumAcc">-</span></p>
<p>Status: <span class="data-status">-</span></p>
<p>Tipe Akun: <span class="data-tipeAkun">-</span></p>

Menyembunyikan Elemen Iklan Untuk Member Premium (Opsional)

Di versi terbaru kamu juga dapat menyembunyikan semua elemen iklan AdSense atau iklan lainnya khusus untuk para pengguna premium atau member premium. Untuk memulai, tambahkan selektor class userPremium di setiap kode atau elemen iklan yang ada. Contoh penerapan kodenya kurang lebih akan seperti ini:

<ins class="adsbygoogle userPremium"
  style="display:block"
  data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
  data-ad-slot="1234567890"
  data-ad-format="auto"
  data-full-width-responsive="true"></ins>

Perhatikan pada teks yang ditandai userPremium, tambahkan selektor tersebut di semua kode iklan yang ada di blog kamu untuk menyembunyikan iklan khusus member premium.

Tahap 5 - Membuat Halaman Login, Registrasi, Dashboard User, Dashboard Admin dan Generator Enkripsi Konten di Blog

Setelah berhasil membuat project, database dan authentication Firebase, langkah selanjutnya adalah membuat halaman login dan registrasi di blog. Berikut caranya:

Tahap 6 - Membuat Postingan Premium Berbayar

Tahap selanjutnya, membuat postingan premium di blog. Pada versi 1.2 dan yang lebih baru, kamu bisa menentukan akses postingan premium, yaitu akses global (semua pengguna premium dapat mengakses konten) dan yang kedua akses untuk tipe/paket premium tertentu saja. Jika masih menggunakan versi lama, kamu bisa unduh ulang file di halaman produk kemudian ganti script enkripsi konten premium versi lama yang digunakan di blog kamu dengan versi terbaru. Untuk cara setting fitur ini, simak dengan baik langkah-langkah di bawah ini:

<div id="konten-premium" data-text="U2FsdGVkX1+FgaJWhQGAtllYEfRfxcXTd3oOJ9VSzWHpQr/Y9g2OHqZJjdodJ8RFgfYnaU2itPrUPvYVGwYY4Q=="></div>

var igneliusPreAkses = {
  globalAkses: false, // untuk menentukan apakah konten terbuka secara global atau tertentu - "true" untuk akses secara global "false" untuk akses khusus untuk paket premium tertentu
  tipePremium: ["basic", "master", "platinum", "tambahkan nama paket lain disini - nama paket harus sama dengan nama yang digunakan di database"], // list nama paket/tipe akun yang bisa akses konten - nama paket bebas apa saja yang penting harus sama dengan nama paket yang digunakan di database pada bagian "paketPremium"
};

var passKontenPremium = "MASUKKAN_PASSWORD_KONTEN_DISINI"; // GANTI NILAINYA DENGAN PASSWORD KONTEN ENKRIPSI KAMU

Tahap 7 - Membuat 2 Link Berbeda Untuk User Premium dan Non Premium

Fitur ini hanya tersedia pada versi 1.2 dan yang lebih baru. Jika masih menggunakan versi lama, silakan ganti kode JavaScript cek-status-login.xml lama dengan file script yang baru (cukup ganti kode JavaScript saja, bisa lihat pada tahap nomor 4 bagian Update Dashblogger Pro).

Fitur ini dapat kamu gunakan jika kamu ingin membedakan setiap link yang ada untuk 2 tipe akun user, yaitu premium dan non premium. Misalnya, jika akun user adalah premium, user tersebut dapat mengunjungi link download menggunakan direct link (link langsung), bukan safelink atau shortlink. Tapi jika akun user bukan premium atau user belum login, maka link yang ditampilkan adalah link safelink atau shortlink, jadi semua user non premium harus melewati link safelink atau shortlink dulu. Sangat cocok untuk blog download yang menggunakan safelink. Untuk cara menggunakan fitur ini, kamu bisa gunakan elemen link berikut:

<a class="linkPremium"
 
 href="LINK_DEFAULT_JIKA_USER_BELUM_LOGIN"
  data-premium-href="LINK_UNTUK_USER_PREMIUM"
  data-nonpremium-href="LINK_UNTUK_USER_NONPREMIUM"
  target="_blank"
  rel="nofollow noopener">ANCHOR TEXT DISINI</a>

Jangan lupa ganti semua teks yang ditandai dengan link download yang diinginkan.

Tahap 8 - Memasang Menu Navigasi Login

Tahap terakhir, memasang kode HTML dan CSS menu navigasi ikon login di blog. Untuk menu navigasi ini bisa dipasang di bagian header blog seperti yang saya gunakan. Namun untuk cara pemasangannya mungkin akan berbeda karena pengaruh struktur template yang digunakan. Jika kamu menggunakan template Igniplex versi 3, kamu bisa ikuti langkah-langkah di bawah ini. Selain template Igniplex, bisa disesuaikan sendiri.

<b:include data='{class: &quot;&quot;, num: &quot;1&quot;}' name='mode'/>

Tahap 9 - Mengubah Status Admin Untuk User Baru

Untuk mengubah status akun user dari "Member" menjadi "Admin", buka database Firebase kamu pilih tab Data cari akun user yang ingin dijadikan sebagai Admin pada path status ubah nilainya menjadi Admin. Contoh gambar:

Sampai tahap ini fitur Dashblogger Pro sudah diinstal sepenuhnya di blog kamu. Tinggal uji coba fitur yang sudah diinstal. Selamat ngoding!