How to add Real-Time Post View Counter?
Adding Realtime Post View Counter to Blogger Website will not require much knowledge about HTML, CSS, or JS because I have already designed it for you. What you need to do is to implement the codes in the right place in your Blogger Theme XML.
Let's take a look at its demo.
Creating Realtime Database and Adding Rules
First, we need to Create a Firebase Project to set up a real-time database in Firebase. We can be able to Store and Synchronize Data in real-time with a real-time database.
To create Firebase Project and real-time database follow these below steps:
Creating a Project in Firebase
Step 1: Go to Firebase Console.
Step 2: Click on Create a Project and Enter Project Name, accept the all terms and Continue.
Step 3: Enable and Configure Google Analytics even though you can disable Google Analytics for this Project skip this step and Click on Create Project.
Done! You have successfully created Project in Firebase. Now we need to set up a Realtime Database in this Project.
Realtime database setup and configuration
Step 1: Go to Firebase Console and Select your Project.
Step 2: Go to Realtime Database under the Build menu.
Step 3:Click on Create Database, Choose the preferred location, and click on Next.
Step 4:Choose Locked Mode and click on Enable.
Done! You Successfully Created Realtime Database, Now Copy the Below database URL And Paste it Somewhere it will be used in the theme HTML Setup.
Adding Rules to Database
Step 5: Now, Click on Rules and paste the following codes after replacing the marked parts with your Blog ID.
For Single Blog:
{
"rules": {
".read": true,
"BLOG_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"
}
}
}
}For Multiple Blogs:
{
"rules": {
".read": true,
"BLOG_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"
}
},
"BLOG_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"
}
},
"BLOG_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"
}
}
}
}Don't Forget to Replace marked Blog id with your Blog id.
Step 5: Click on Publish after making all the changes like the below image.
Theme HTML changes
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance, if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to the 'customize' button.
Step 4: Click Edit HTML, and you will be redirected to the editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
If your template has a dark mode feature, and if you want a different color when in dark mode, you can customize the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.
/*! Realtime Post View Counter by House Of Blogger */
.pVw{display:inline-flex;align-items:center;background:#fff;padding:4px 10px;border-radius:10px;box-shadow:0 0 25px rgba(0,0,0,.02);color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.pVw[data-view]{visibility:visible;opacity:1}
.pVw >svg{width:18px;height:18px;fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:5px}
.pVw >svg .a{stroke:#204ecf}
.pVw::after{content:attr(data-view) ' views'}
.drK .pVw{background:#252526;color:#fff}
.drK .pVw >svg{stroke:#fff}
.drK .pVw >svg .a{stroke:#41b375}
Step 6: Now add the following HTML codes at the place you want to show in Blog Widget.
<!--[ Realtime Post View Counter by House Of Blogger ]-->
<span class='HOB_vw pVw' data-incr='true' expr:data-path='"BLOG_" + data:blog.blogId + "/POST_" + data:post.id'>
<svg class='line' viewBox='0 0 24 24'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle class='a' cx='12' cy='12' r='3'/></svg>
</span>
You can replace true it with false, so that it will only show the views and will not increase (+1) it. For example, you can use it to show views of posts on the homepage.
Step 7: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.
<script>/*<![CDATA[*/
/*! Realtime Post View Counter by House Of Blogger */
(() => {
const config = {
databaseUrl: 'https://....firebaseio.com/',
abbreviation: true,
lazyload: true
};
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}return p}('!14(){24 13=32();14 12(12,13){16 17(13-53,12)}14 15(12,13){16 17(13-89,12)}50(;;)142{33(141==+20(12(140,53))+20(12(139,138))/2*(-20(12(137,136))/3)+-20(15(135,134))/4*(20(15(132,123))/5)+20(12(131,130))/6*(-20(15(129,51))/7)+-20(12(128,127))/8+-20(12(126,125))/9+-20(15(51,143))/10*(-20(12(133,144))/11))157;13.67(13.54())}166(12){13.67(13.54())}}();24 37=(12,13,15,18)=>{14 19(12,13){16 17(13-248,12)}24 21=25[27(-163,-162)](19(259,260));14 27(12,13){16 17(12- -161,13)}13&&(21.160=13),21[27(-159,-158)]=15,21.156=12,18&&(21[27(-146,-155)]=18),25[27(-153,-152)](19(57,151))[0][19(57,149)](21)};14 30(12,13){16 17(13-148,12)}14 38(12,13){16 17(12-78,13)}24 49=12=>{14 13(12,13){16 17(12-229,13)}29 15=22[18(-58,-58)](23(12));14 18(12,13){16 17(12- -145,13)}16 59<=22[18(-35,-122)](23(12))?15*(22[18(-35,-60)](23(12))/59)[18(-56,-60)](2)+"120":61<=22.43(23(12))?15*(22[13(248,245)](23(12))/61)[13(249,224)](2)+"97":62<=22[13(248,244)](23(12))?15*(22.43(23(12))/62)[18(-56,-35)](2)+"94":22[13(248,93)](23(12))};14 32(){29 12=["55","92","91","90","83","88","87",".86","63","85","40-84","98","100","40-99","111","119","118","117","40-115","44","114","65-72","66://68.71.69/70/8.10.1/26-63.64","65-110","101","76","109","108","107","106","168","75","105","104","103","102","167","147","169","186","242","241","240","239","238","237","236","235","74","233","222","231","43","228"];16(32=14(){16 12})()}14 31(){37("66://68.71.69/70/8.10.1/26-72.64",17(42,-28),!0,()=>{14 12(12,13){16 17(12- -234,13)}37(12(-247,-262),12(-263,-261),!0,()=>{55()})})}14 17(12,13){29 15=32();16(17=14(12,13){16 15[12=+12]})(12,13)}33(81[38(256,255)]=14(){14 19(12,13){16 17(12- -254,13)}14 12(12,13){16 17(12-258,13)}33(34[12(52,253)]){33(!26[19(-252,-251)][12(220,193)]){24 13={};13[19(-218,-189)]=34[12(52,187)],26[12(219,185)](13)}50(46 13=25[12(183,182)](12(180,170)),15=26[12(47,47)](),18=0;18<13[19(-177,-176)];18++){46 12=13[18];29 21=12[19(-45,-174)](19(-172,-171)),21=15[19(-190,-181)](21);21[19(-192,-209)]("217",14(18,19){16 14(12){14 13(12,13){16 17(13- -232,12)}14 15(12,13){16 17(13-216,12)}0<(12=12.215()?12.214():0)&&(18.44(15(45,211),34[15(210,208)]?49(12):12),18[13(-173,-196)][15(195,206)]("205")),13(-221,-194)==18[13(-207,-202)](15(203,48))&&(18[15(201,200)](15(198,48),!1),12=20(12)+1,19[13(-204,-191)](12))}}(12,21))}}},!0===34.197){29 82=[],39=[];24 41=()=>{14 12(12,13){16 17(12-199,13)}14 13(12,13){16 17(13- -78,12)}0==82[13(-212,-213)]&&175==36[12(178,179)](13(-79,-184))&&(36[13(-188,-79)](12(257,250),1),31())};81[38(223,246)](30(225,226),12=>{14 13(12,13){16 17(12- -227,13)}(0!=25[13(-73,-230)][13(-80,-112)]&&0==39[13(-77,-113)]||0!=25[13(-116,-73)][13(-80,-95)]&&0==39[13(-77,-96)])&&41()},!0),25.74("75")[0][30(121,150)](30(154,164),12=>{41()}),36[30(165,124)]("76")&&31()}243 31();',10,264,'||||||||||||t|e|function|n|return|_0x4db6|a|r|parseInt|c|Math|Number|const|document|firebase|o||var|_0xaac43c|postVw|_0x20fc|if|config|601|localStorage|loadJs|_0x4cda98|arSc|data|sa||abs|setAttribute|491|let|770|470|abvr|for|341|763|815|shift|hobViews|600|284|602|1e9|581|1e6|1e3|database|js|fb|https|push|www|com|firebasejs|gstatic|app|892|getElementsByTagName|body|LZ_VIEW|918|555|508|891|window|arLz|databaseURL|path|getAttribute|HOB_vw|querySelectorAll|initializeApp|335|length|apps|databaseUrl|272|K|887|938|M|ref|view|once|getItem|48198cjPOCE|56sdHFLl|285442QUeuPh|click|documentElement|scroll|addEventListener|setItem|db|abbreviation|908|926|set|incr|890|true|remove|classList|B|408|614|339|421|823|832|822|840|366|820|843|332|810|338|363|817|793|816|794|839|546365|try|344|825|620|608|5aXPTwe|376|265|424|264|612|607|430|591|src|break|606|609|id|622|587|611|429|415|catch|630960arLEPj|scrollTop|18978TtxiRN|777|507|490||481|null|524|497|1021|1033|769|501|754|768|509|753|1631QikCmJ|758|523|522|489||488|755||457||lazyload|493|976|471|461||480||hidden|468||466|479|469|465|558|531|val|exists|431|value|496|767|765||appendChild|603||398|425|942|toFixed||869|sign||head|696|onload|async|script|createElement|16713961RRSWZX|20AfUVSt|3801717CNpPuY|8087992FyVyQi|else|||583|653|||1013|520|498|786|521|575|576|1022|741|||669|626|652'.split('|')));
})();
/*]]>*/</script>
Replace the marked parts, i.e.
1. Realtime Database URL in databaseUrl key.
2. true or false in abbreviation key.
3. true or false (recommended: true) in lazyload key.
Step 8: Lastly, Save the changes by clicking on this icon
That's done! You have successfully added the Realtime Post View Counter to your Blogger Site.
Final Words
Today I Shared the whole code for real-time post views for your blogger website, if you have any doubt related to this post then feel free to comment below.
If you liked this post, I’d be very grateful if you’d help it spread by sharing it with your friends and in blogging groups. Thank you!
In the upcoming posts, I will share amazing tutorials and codes like this post, so make sure you bookmark our website by pressing CTRL+D
Also, check out our nextgen blogger template Plus UI which will provide you amazing and useful features.