Mengapa Jumlah Kunjungan Artikel Sangat Penting
Sebagai pemilik blog, Anda mungkin telah menghabiskan banyak waktu dan usaha untuk membuat konten berkualitas tinggi. Namun, tanpa jumlah kunjungan yang cukup, artikel Anda mungkin tidak dapat mencapai audiens yang diinginkan. Oleh karena itu, meningkatkan jumlah kunjungan artikel adalah langkah penting untuk meningkatkan visibilitas blog Anda di mesin pencari seperti Google.
Pengenalan tentang JavaScript dan Firebase
JavaScript adalah bahasa pemrograman yang populer digunakan untuk membuat dan Meningkatkan Jumlah Kunjungan interaksi yang dinamis dan menarik di situs web.
Dengan JavaScript, Anda dapat membuat fitur-fitur seperti pengguliran halaman, validasi formulir, atau pembaruan konten secara dinamis tanpa harus me-refresh halaman.
Menggunakan JavaScript dan Firebase untuk Meningkatkan Jumlah Kunjungan Artikel
Firebase, di sisi lain, adalah platform pengembangan aplikasi berbasis cloud yang dikelola oleh Google. Firebase menyediakan banyak fitur, termasuk penyimpanan data, otentikasi pengguna, dan notifikasi, yang dapat diintegrasikan dengan aplikasi web And
Berikut adalah langkah-langkah rinci tentang bagaimana Anda dapat menggunakan JavaScript dan Firebase untuk meningkatkan jumlah kunjungan artikel di blog Anda:
Buat Database Realtime dan Tambahkan Aturan
Pertama, kita perlu membuat Proyek Firebase untuk menyiapkan database real-time di Firebase. Kita bisa menyinkronkan dan mengeditnya sesuai dengan jumlah view di Blogger.
Untuk membuat Proyek Firebase dan basis data real-time, silakan lihat langkah-langkah berikut:
Buat Proyek di Firebase
Langkah 1: Buka Firebase Console .
Langkah 2: Pilih Buat Proyek dan masukkan nama Proyek, klik Lanjutkan untuk melanjutkan.
Langkah 3: Matikan Google Analytics dan klik Buat Proyek.
Itu saja, membuat Project di Firebase, diikuti dengan instalasi Realtime Database.
Instal Basis Data Waktu Nyata
Langkah 1: Buka Firebase Console dan pilih Proyek yang baru dibuat.Langkah 2: Di menu sebelah kiri, akses Realtime Database .
Langkah 3: Pilih Buat Database, dan pilih Berikutnya.
Langkah 4: Lanjutkan untuk memilih Locked Mode dan klik Enable.
Jadi kita sudah membuat Realtime Database nya, mari kita copy path seperti pada gambar yang saya tandai.
Tambahkan ke Basis Data
Selanjutnya, alihkan ke tab RULES dan ganti semua kode lama dengan kode berikut:
:
{
"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 && DataBaru.val() <= 99999999"
}
}
}
}
Kemudian klik Terbitkan untuk menyimpan kode yang diubah.
Edit templat
Langkah 1: Anda memasukkan CSS berikut sebelum tag]]></b:skin>
>
<! -- [ Penghitung Tampilan Pos Waktu Nyata oleh NLD Blog ] -- >
.entry-views { color : #000 ; ukuran font : 14px ; visibilitas :tersembunyi; opasitas : 0 ; transisi : semua . 2s kemudahan}
.entry-views [data-view] { visibility :visible; opacity : 1 }
.entry-views ::after { konten : attr (data-view) 'views' }Langkah 2: Tambahkan HTML berikut untuk menampilkan tampilan:
< span class = 'nld_view entry-views hidden' data-add = 'true' expr:data-id = 'data:post.id' />
Pada paragraf data-add='true'Anda ubah menjadi false jika ingin menampilkan tampilan pada halaman lain selain halaman artikel.
Secara khusus, benar, saat halaman dimuat, itu akan memberi +1 tampilan, dan salah, saat memuat ulang halaman, itu tidak akan menambah lebih banyak tampilan tetapi hanya menampilkan tampilan yang sudah ada.
Langkah 3: Selanjutnya, masukkan JavaScript berikut sebelum tag/body
<script>
const viewSeting = {
blogID : '0000000000000000000' ,
databaseUrl : 'databaseUrl' ,
singkatan : true ,
lazyload : true
}
function loadJs ( e, b, c, d ) {
biarkan a = document .createElement( "script" );
b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), dokumen .getElementsByTagName( "head" )[ 0 ]. tambahkanAnak(a)
}
function abvr ( a ) {
var b = Math .sign( Number (a));
return 1e9 <= Matematika .abs( Angka (a)) ? b * ( Matematika .abs( Angka (a)) / 1e9 ).toFixed( 2 ) + "B" : 1e6 <= Matematika .abs( Angka (a)) ? b * ( Matematika .abs( Angka (a)) / 1e6 ).toFixed( 2 ) + "M" : 1e3 <=Matematika .abs( Angka (a)) ? b * ( Matematika .abs( Angka (a)) / 1e3 ).toFixed( 2 ) + "K" : Matematika .abs( Angka (a))
}
fungsi memuatPostVw () {
untuk ( var c = dokumen .querySelectorAll( ".nld_view" ), e = firebase.database(), a = 0 ; a < c.length; a++) {
var d = c[a],
b = d.getAttribute( "data-id" );
(b = e.ref( "BlogID_" + viewSeting.blogID + "/PostID_" + b)).once( "nilai" , fungsi ( a, b ) {
kembali fungsi ( c ) {
0 < (c = c. ada() ? c.val() : 0 ) && (a.setAttribute( "data-view" , viewSeting.singkatan ? abvr(c) : c), a.classList.remove( "hidden" )), "true " == a.getAttribute( "data-tambahkan" ) && (a.setAttribute( "data-tambahkan" , ! 1 ),c = parseInt (c) +1 , b.set(c))
}
}(d,b))
}
}
fungsi postVw () {
loadJs( "https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js" , "fb-app" , ! 0 , () => {
loadJs( "https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js" , "fb-db" , ! 0 , () => {
var a = {};
a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
})
})
}
if (! 0 === viewSeting.lazyload) {
var a = [],
b = [];
biarkan c = () => {
0 == panjang && null == localStorage.getItem( "LZ_VIEW" ) && (localStorage.setItem( "LZ_VIEW" , 1 ), postVw())
};
jendela .addEventListener( "gulir" , a => {
( 0 != dokumen .documentElement.scrollTop && 0 == b.panjang || 0 != dokumen .body.scrollTop && 0 == b.panjang) && c()
}, ! 0 ), dokumen .getElementsByTagName( "tubuh" )[ 0 ].addEventListener( "klik" , a => {
C()
}), localStorage.getItem( "LZ_VIEW" ) && postVw()
} else postVw()
< /script>Langkah ini anda ganti :
1. 0000000000000000000Sama seperti Blog ID diatas Add Rules to Database .
2. databaseUrlAnda ubah ke URL Realtime Database Anda yang saya suruh Anda salin di atas.
3. abbreviationbisa trueatau false.
4. lazyloadsama trueatau false.
Terakhir simpan dan periksa di Blog Anda.
