How to make a Page View widget on every Blogspot post
in this tutorial I use Firebase, already know what Firebase is?
Ok, I will explain a little about Firebase, who knows among the readers here don't know what Firebase is.
Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, but was acquired by Google in 2014.
maybe Android application developers are familiar with Firebase, but for Bloggers, maybe most of them are still foreign, especially Bloggers in Indonesia.
In Indonesia, MGA has been looking for this widget tutorial but it has zero results.
POST VIEW ADVANTAGES AND CONS:
There is no expiration period or expiration period.
Post View realtime (every visitor or reload will add 1 view, if the template supports realtime preview or live preview, it will be counted).
Simple and easy to place wherever the blog admin wants.
DEFICIENCY!
Post View start from scratch (Zero View).
Ok, without lingering, we immediately practice
Create a new project
when you are logged in, please create a new project for your blog.
Fill in the blog data
EXPLANATION:
Project / Blog Name (Free)
Firebase ID (this Firebase ID must be remembered, if necessary, write it in notepad or other text applications, because it will be used on the blog)
Select Country (Free)
Check two agreements (Mandatory)
When finished Click "Add Firebase"
When you have, you will wait a few seconds, a maximum of 1 minute, when the project is complete you will be directed to the front page of the application.
Create a New Database
Look on the left, in the "DEVELOP" group, select Database.
Create Realtime Database
Realtime Database Activation
After you select Realtime Database, you will be given two options, select number two, namely "Start In Test Mode", and click "ENABLE".
We are done with Firebase, now we turn to blogger or blogspot.
B. Second Understanding
please login to blogger, and select a theme or theme, and click the "Edit HTML" button
Firebase ID JavaScript script
Search for </body> and paste or paste the script below right above it.
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) { var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://ID_FIREBASE.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) { var data = snapshot.val();
var isnew = false; if(data == null) { data= {};
data.value = 0; data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true; } elem.text(data.value);
data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data);
else blogStats.child('value').set(data.value); } }); });
</script>
Please replace "ID_FIREBASE" with the Firebase ID of the application that you created earlier.
- Post View placement
Copy and Paste this script where you want it, try to paste it in a place like under the title or in the author code or date code line.
<a expr:name='data:post.id'/>
<i class='fa fa-eye' style='color:black'/> <span id='postviews'/> Views
SAVE AND DONE!
Please see the results, keep in mind, don't change the javascript script, because it can damage the code, if you want to change it, just change the awesome font.
WARNING !!!
Post View calculations will start from the hour, minute, and second you install or install the two scripts above, so if your post already has hundreds or even thousands of views beforehand, the count will start at zero again (calculation in Firebase, not blog).
