Skip to main content

Membuat Register Atau Login Blogger Dengan Javascript Khusus Firebase Authentication


Cara buat fitur login di blogger, cara membuat fitur login di blogger pakai Firebase, download kode html javascript fitur login di blogger dengan firebase Authentication.

Banyak yang bertanya kepada saya, apakah bisa membuat fitur login di blogspot (blogger) ?. Ya tentu saja bisa, pada kesempatan kali saya akan membahasnya untuk kamu membuat fitur login di blogger.

Membuat Fitur Login BloggerMeski di blogspot gak ada fitur login buat pengguna asli bawaannya seperti di wordpress . Namun pengguna blogger bisa membuat fitur login di blogger/blogspot juga loh.

Dan untuk membuat fitur login di blogger itu ternyata sangat mudah, gak sulit-sulit amat loh. Kamu hanya cukup melakukan beberapa langkah saja untuk bisa menampilkan fitur login di blogger tersebut.

Yang Harus Disiapkan Membuat Fitur Login Di Blogger

Perlu kamu ketahui apa saja yang harus disiapkan untuk membuat fitur login Authentication di blogger. Berikut saya sudah merangkumnya buat kamu.

1. Memiliki Akun Blogger 

pertama yang harus disiapkan untuk membuat fitur login di blogger ya pastinya kamu harus memiliki blog dari blogger/blogspot.

Pastikan Blogger kamu sudah terpublikasi, dan bisa di akses secara online oleh siapapun agar fitur login di blogspot kamu nantinya bisa berfungsi.

2. Akun Firebase yang sudah di setting 

Kedua untuk membuat fitur login di blogger, kamu harus memiliki akun Firebase yang sudah di setting ke Authentication. Jika kamu belum memahami cara menyetting Firebase Authentication untuk blogger, tenang saja karena saya akan membahasnya nanti di bawah.

Fungsi Firebase sendiri , sebagai server yang sama-sama dari google yang digunakan untuk Authentication. Dimana pengunjung blogspot bisa melakukan login / register akun blog kamu yang nantinya data mereka akan disimpan di Firebase.

3. Html javascript kusus fitur login buat Blogger 

Terakhir, setelah kamu melakukan 2 langkah yang saya sebutkan barusan. Berikutnya kamu harus membuat fitur html javascript kusus yang berfungsi sebagai jalan yang menghubungkan antara blogger dan Firebase Authentication saat pengunjung blog kamu melakukan login ataupun register.

Jika kamu gak memahami cara membuat html javascript untuk fitur login di blogger. Kamu tenang saja, karena saya juga akan membagikan kode tersebut secara gratis yang nantinya bisa kamu modifikasi berdasarkan blogger dan akun Firebase kamu.

Membuat Fitur Login Di Blogger Dari Nol Hingga Berfungsi 

Oke selanjutnya mari kita buat fitur di blogger kamu dari nol hingga benar-benar berfungsi. Oke sebelum lanjut, siapkan rokok, dan kopi hitam dulu biar otak kamu lebih fresh 🤣.

Oke berikut adalah langkah-langkah membuat fitur login di blogger kamu dari nol hingga benar-benar berfungsi.

1. Membuat Blog Di Blogspot 

Di langkah ini gak perlu saya jelasin panjang kali lebar ya, saya sudah tau kalau kamu memiliki blog di blogspot dan sedang mencari cara membuat fitur login di platfrom Blogger.
Oke langsung saja ke langkah berikutnya saja ya 😂.

2. Membuat Authentication Di Firebase 

Nah selanjutnya kita buat dilu fitur login Authentication di Firebase terlebih dahulu. Untuk mengaktifkan fitur login di blogger saat membuat widget login/register tersebut di blogspot.

  1. Pertama silahkan buat projek dahulu di console.firebase.google.com 
    Membuat projek di Firebase



  2. Kemudian kamu pilih web apps , pilih saja icon yang saya beri tanda panah ya solv. 



  3. Lalu buat app nickname dan centang seperti di gambar ya.
    Kemudian klik tombol register apps


  4. Kemudian pada gambar berikut, centang seperti yang dicentang di dalam gambar.
    Kemudian klik next >> next lagi >> continue to console


  5. Lalu saat sudah berhasil masuk ke console klik Authentication seperti yang ada di gambar.


  6. Kemudian pilih menu gett starterd seperti yang ada di gambar .
    Catatan:maaf ada coretan merah, di editan gambar.


  7. Lalu pilih bagaimana pengguna blogspot kamu melakukan login dan registrasi. Disini saya sarankan memilih ( email / pasword dan google )

  8. Oke kamu klik saja dua fitur itu jika ada tombol centang, kalian centang dan save saja.

  9. Kemudian klik pengaturan >> klik domain resmi >> tambahkan domain resmi. 

  10. Padaa saat menambahkan nama domain masukan contoh namadomain.com jadi tanpa www ya.
    Contohnya seperti gambar berikut: 
Oke sobat, sekarang kamu dan saya berhasil membuat proyek Firebase Authentication. Langkah selanjutnya mari kita temukan kode javascript SDK dari Firebase Authentication.

Berikut adalah cara menemukan kode login Firebase Authentication:

  1. Tekan tombol icon pengaturan kemudian klik pengaturan proyek. 

  2.  Kemudian scroll kebawah dan centang konfigurasi seperti gambar dibawah. Nantinya kamu akan menemukan kode seperti contoh


  3. Lalu save kode seperti yang saya contohkan

const firebaseConfig = {

  apiKey
: "AIzaSyBmIAjWUKY4cJuAJ6J_axanDr7h_8DElug",

  authDomain
: "carangeblogdotcom.firebaseapp.com",

  projectId
: "carangeblogdotcom",

  storageBucket
: "carangeblogdotcom.appspot.com",

  messagingSenderId
: "489110980270",

  appId
: "1:489110980270:web:da3df6d49ec18234014f3f",

  measurementId
: "G-T5BF0YE3P1"

};

Oke jika kamu sudah menemukan kode agar fitur login di blogger kamu nantinya berfungsi, lalu langsung saja save kodenya.

Membuat Fitur Login Di Blogger/Blogspot Dengan Html Javascript Khusus Firebase Authentication 

Selanjutnya, silahkan kamu Download Kode Html Javascript Kusus Menampilkan Fitur Login Di Blogger.

Oke langsung saja kamu klik tombol download dibawah >> lalu ikuti panduan step by step cara melakukan modifikasi kodenya yang sudah tertera di dokumentasi.DOWNLOAD DISINI

Setelah kamu download,  kodenya kamu tinggal pasang kode api Firebase nya di kode yang sudah kamu download.
Di file kodenya sudah ada dokumentasi panduanya kamu tinggal ikuti ajaa panduanya.
Jadi itulah tutorial lengkap cara membuat fitur register/login di blogger yang bisa kamu ikuti dari tutorial saya ini. Mudah-mudahan artikel saya ini bermanfaat.

Comments

Popular posts from this blog

Alasan Kode Adsense Menurunkan Performa Blog Dan Cara Mengatasinya

  Kenapa Performa Blogger Otomatis Menurun Jika Di Pasangkan Kode Script Google Adsense. Padahal Sebelum Kode Script Adsense Dipasang Performa Blogger Ijo Dengan Nilai 97, sedangkan Setelah akode Adsense Dipasang Performa Blogger Otomatis menurun Menjadi Kuning Dengan Nilai 62. Pada Kesempatan Kali Ini Saya Akan Membahas Alasan Kode Script Google Adsense Bisa Menurunkan Performa Blogger Dan Cara Mengatasinya. Alasan Kode Script AdSense Menurunkan Performa Blogger , Monetisasi blog menggunakan Google AdSense adalah salah satu cara paling populer untuk mendapatkan penghasilan dari konten yang kita buat. Banyak pemilik blog yang memilih Google AdSense karena mudah diintegrasikan dan memiliki jangkauan iklan yang luas. Namun, ada masalah yang sering muncul setelah memasang kode AdSense pada blog, yaitu penurunan performa blog. Artikel ini akan membahas secara mendalam. alasan kode AdSense menurunkan performa blog, serta bagaimana cara mengatasinya. Berikut adalah alasan Kode Script Goo...

Membuat Widget CV Generator Di Blogger

 Cara Membuat Widget CV Lamaran Kerja Secara Otomatis di Blogger: Solusi untuk Generasi Z Banyak anggota Generasi Z saat ini menghadapi tantangan dalam melamar pekerjaan, terutama ketika mereka tidak memiliki Curriculum Vitae (CV) yang memadai atau tidak tahu cara membuat CV yang baik dan benar. Ini menjadi peluang emas bagi para blogger untuk membantu audiens yang tengah mencari solusi praktis dalam menyusun CV dengan mudah. Dengan membuat widget yang memungkinkan pembuatan CV secara otomatis, para konten kreator dapat memberikan nilai tambah bagi pengunjung blog mereka. Apa Itu Curriculum Vitae (CV)? Curriculum Vitae, sering disingkat CV, adalah dokumen penting yang merangkum riwayat hidup, pendidikan, pengalaman kerja, keterampilan, dan prestasi individu. CV sering digunakan dalam proses pencarian kerja sebagai alat untuk memberikan gambaran menyeluruh kepada calon pemberi kerja mengenai latar belakang profesional dan akademis seseorang.  Berikut adalah beberapa elemen kunc...

Membuat Permalink Custom Di Blogger Yang Benar

 Cara membuat custom pemalink di blogger / blogspot yang benar untuk optimasi seo artikel agar lebih berkualitas dan seo friendly. Cara Membuat Permalink Custom Blogger yang Benar: Panduan Lengkap Menulis Artikel Blog  Permalink adalah elemen penting dalam SEO yang sering diabaikan oleh para blogger pemula. Di Blogger, permalink adalah URL yang ditetapkan untuk setiap postingan. Sebagian besar pengguna Blogger cenderung membiarkan permalink diatur secara otomatis, padahal membuat permalink kustom dapat meningkatkan optimasi mesin pencari (SEO) dan memudahkan pembaca menemukan artikel Anda. Artikel ini akan membahas **cara membuat permalink custom di Blogger yang benar**, serta bagaimana cara memanfaatkannya untuk meningkatkan ranking di Google. Ketahui Apa Itu Permalink Di Blogger? Sebelum kita masuk ke dalam panduan teknis, penting untuk memahami apa itu permalink. Permalink adalah URL tetap yang digunakan untuk menampilkan postingan atau halaman tertentu di situs web Anda. ...