Pilih Bahasa
Indonesia
English
Japan (日本語)
China (简体中文)
Korean (한국어)
Hindi (हिंदी)
Vietnam (Tiếng Việt)
Arabic (العربية)
p7xhMSO4O9fyfib8OANOxXym2LUEvDesKq0YUJbG

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.
Menambahkan Domain Baru di Authorized Firebase
Menambahkan domain ke Authorized Domain Firebase

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

Buka file bernama script-rules-database-firebase.json kemudian salin semua script yang ada.
Buka project Firebase Database Firebase buka tab Rules hapus semua script bawaan kemudian ganti dengan script yang sudah disalin tadi.
Klik tombol Publish untuk mengupdate perubahan.

Tahap 3 - Memasang CSS Variable di Blog

Buka file bernama css-variable.xml salin semua kode yang yang ada.
Buka blog kamu masuk ke menu Tema Edit HTML taruh kode di atas </head>. Klik simpan.

Tahap 4 - Memasang Script Cek Status Login User

Buka file produk bernama cek-status-login-user.xml.
Setelah itu masuk ke dashboard Blogger kamu Tema Edit HTML.
Kemudian cari kode <body> dalam template blog kamu setelah itu taruh semua script Script Cek Status Login User.xml yang sudah kamu salin sebelumnya tepat DI BAWAH kode <body> tadi.
Kemudian ganti bagian lisensiKey dengan kode lisensi yang kamu miliki. Dan jangan lupa ganti juga pada bagian Firebase Config dalam JavaScript dengan script Firebase Config yang kamu miliki (ada di tahap 1). Contoh kode lengkapnya:
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 */
};
Jika sudah diganti, klik simpan.

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:

Buka dashboard Blogger kamu.
Buatlah halaman statis baru (masing-masing file untuk satu halaman statis).
Kemudian buka file produk bernama script-halaman-login.xml lalu salin semua kode yang ada kemudian taruh ke dalam halaman statis yang sudah dibuat tadi. Jika sudah, klik Publikasikan.
Lakukan cara yang sama untuk membuat halaman registrasi dan halaman lainnya seperti dashboard user, dashboard admin dan generator enkripsi konten. Setiap 1 file script untuk 1 halaman statis blog. Script registrasi ada dalam file bernama script-halaman-registrasi.xml, script dashboard user dalam file script-dashboard-user.xml, script dashboard admin dalam file script-dashboard-admin.xml dan script generator dalam file script-generator-enkripsi-konten-premium.xml.

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:

Buka file bernama encrypt-post-premium.xml.
Salin semua kode yang ada. Kemudian buatlah postingan baru di blog lalu taruh semua kode yang sudah disalin.
Dalam kode HTML, terdapat elemen dengan selektor ID konten-premium yang memiliki atribut data-text="...". Ganti nilai yang ada dalam atribut data-text="..." tersebut dengan konten premium kamu yang sudah dienkripsi sebelumnya. Hasil akhirnya kurang lebih akan seperti ini:
<div id="konten-premium" data-text="U2FsdGVkX1+FgaJWhQGAtllYEfRfxcXTd3oOJ9VSzWHpQr/Y9g2OHqZJjdodJ8RFgfYnaU2itPrUPvYVGwYY4Q=="></div>
Dalam kode JavaScript terdapat variable bernama igneliusPreAkses. Variable tersebut adalah konfigurasi untuk mengatur jenis enkripsi konten premium yang ingin digunakan. Berikut contoh script lengkapnya dan cara setting-nya:
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"
};
KONFIGURASI:
1. globalAkses : untuk menentukan jenis enkripsi konten premium, jika nilainya false, maka konten hanya dapat diakses oleh user dengan premium tertentu saja. Ubah nilainya menjadi true jika ingin konten dapat diakses secara global oleh semua user dengan akun premium.
2. tipePremium : adalah list paket/tipe akun premium yang dapat mengakses konten (hanya berfungsi jika nilai pada globalAkses adalah false). List nama ini harus sama dengan nama yang digunakan di database kamu.
Terakhir, masih dalam kode JavaScript, terdapat variable passKontenPremium seperti berikut. Variable tersebut adalah password untuk membuka konten premium yang terenkripsi. Password konten ini didapat melalui tool generator enkripsi kamu.
var passKontenPremium = "MASUKKAN_PASSWORD_KONTEN_DISINI"; // GANTI NILAINYA DENGAN PASSWORD KONTEN ENKRIPSI KAMU

Jangan lupa enkripsi bagian tersebut untuk menjaga keamanan konten premium 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.

Buka file bernama css-variable.css dan menu-nav-login.css kemudian salin semua kodenya lalu taruh kodenya ke dalam template blog (Edit HTML) tepat DI ATAS ]]></b:skin> atau </style>.
Selanjutnya buka file bernama menu-nav-login.html dan salin semua kode HTML yang ada. Kemudian cari kode seperti berikut lalu taruh kode HTML tepat di bawahnya.
<b:include data='{class: &quot;&quot;, num: &quot;1&quot;}' name='mode'/>
Selesai!

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:

Mengubah Status Akun User Menjadi Admin
Mengubah status akun user menjadi Admin

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