I will show how to add views to blogger posts using JavaScript and Firebase. You won't need much HTML, CSS, or JS experience to complete this course because the code I supply is already in use. You can correctly add it to your template by following the guidelines.
Create Realtime Database and add Rules
set up a Firebase project to construct a real-time database. It can be synchronized and modified based on Blogger views. Steps to create a Firebase project and real-time database:Build the project using Firebase.
First, open the Firebase console.
2nd, Select Project Name and Click Continue.
Third, close Google Analytics and select Create Project.
Create the Firebase project and install the real-time database.
Set up a real-time database.
First, select New Project in the Firebase console.
Second, select Realtime Database from the left option.
Third, create the database and click Next.
Fourth, select the locked mode and enable it.
Create Database Rules
After that, select the RULES tab and change all of the previous code to the code shown in the following table:
{
"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 && newData.val() <= 99999999"
}
}
}
}
Replace 00000000000000000000 with the ID of your blog.
After that, select Publish from the menu to save the modified code.
Let's copy the link from the realtime database we created, which we will need later.
Let's set up a blogger post view counter.
First, access your Blogger dashboard.
Second, click Themes on Blogger's dashboard.
Important! I recommend backing up your theme before adding XML. A problem may arise, but you can fix it later.
Step 3: Click 'Customize''s arrow-down.
Step 4: Click Edit HTML to see the editing page.
Step 5: Paste the CSS codes above the ]]></b:skin>
/* Greetings & Realtime Post View Counter*/ .pGV{display:flex;justify-content:space-between;position:relative;font-size:13px;padding-top:6px;padding-bottom:20px;} .pGV >*{padding:10px;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:var(--greetR);display:flex;align-items:center;justify-content:center} .pGV >*:first-child{margin-right:5px} .pGV >*:last-child{margin-left:5px} .Rtl .pGV >*:first-child{margin-right:0;margin-left:5px} .Rtl .pGV >*:last-child{margin-left:0;margin-right:5px} .pGV .pVws.hidden{display:none} .pGV .pGrt::after{content:attr(data-text)} .pGV .pVws::after{content:attr(data-text) ' views'} .pGV svg{width:15px;height:15px;margin-right:6px} .pGV svg.line{stroke-width:1.5} .Rtl .pGV svg{margin-right:0;margin-left:6px} .drK .pGV >*{background:var(--darkBa)}
.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1;margin: 0;}
.entry-views::after{content:attr(data-view) ' views'}
Step 6: Place the Javascript above the </body> tag.
<script>
/*<![CDATA[*/
/*! Realtime Post View Counter */
const viewSeting = {
blogID: '0000000000000000',
databaseUrl: '#',
abbreviation: true,
lazyload: true
}
function loadJs(e, b, c, d) {
let a = document.createElement("script");
b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
}
function abvr(a) {
var b = Math.sign(Number(a));
return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
}
function loadPostVw() {
for (var c = document.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("value", function(a, b) {
return function(c) {
0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
}
}(d, b))
}
}
function 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 = [];
let c = () => {
0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
};
window.addEventListener("scroll", a => {
(0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
}, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
c()
}), localStorage.getItem("LZ_VIEW") && postVw()
} else postVw()
/*]]>*/
</script>
Change: 1. Replace Blog ID with 0000000000000000000 in the Add Rules to Database section. 2. Your copied real-time database URL should replace databaseUrl. 3. True or false for brevity. 4. Lazyload resembles true or false.
Step 7: Use this code to count homepage views live. ''Post jumplinks'' Upper
<span class='nld_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>
Step 8: Use this code to write blog post real-time view count. ''Post brdCmb'' Upper
<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='pGV'>
<!--[ Greetings ]-->
<span class='pGrt' data-text='Welcome!' id='greetings'><b:include name='smile-icon'/></span>
<!--[ Page Views ]-->
<span class='nld_view entry-views hidden pu-views' data-add='true' expr:data-id='data:post.id'><b:include name='eye-icon'/></span>
</div>
<script>/*<![CDATA[*/ var welElem = document.querySelector("#greetings"); var curHr = new Date().getHours(); var welMes = ["Have a Sweet Dreams!", "Good Morning!", "Good Afternoon!", "Good Evening!", "Good Night!", "It's time to sleep!"]; let welText = ""; if (curHr < 4) welText = welMes[0]; else if (curHr < 12) welText = welMes[1]; else if (curHr < 17) welText = welMes[2]; else if (curHr < 19) welText = welMes[3]; else if (curHr < 22) welText = welMes[4]; else welText = welMes[5]; welElem.setAttribute('data-text', welText); /*]]>*/</script>
</b:if>
Step 9: Be careful to save it.
Thanks for visiting on site
Post reference