Notifikasi
Tidak ada notifikasi baru.

How to Add Blogger Realtime Post View 2023 Topic Impression Counter

 

How to Add Blogger Realtime Post View 2023 Topic Impression Counter
How to Add Blogger Realtime Post View 2023 Topic Impression Counter

Hello dear visitors of BademWEB. In this topic, I will tell you how you can add post views, that is, a topic display counter, to your blogger theme.

Unfortunately, this feature is not available in most blogger themes. However, it is quite simple to add this blogger widget to your theme in just a few minutes, completely free of charge.

First, if you don't have a Firebase account, create one for free now. We will add views to our shares using the Firebase realtime database feature.

FireBase Console Link


Click on Create Project as marked in the picture



You can randomly generate the project name.






Click Create Database in the Realtime Database section and create a realtime database.

Go to Rules and change false to true.

Go to your Blogger panel and search for the <head> code and add the following code just below.



 <!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>

 
Go to your Blogger panel and search for <data:post.body/> and add the following code just above it.

 <b:if cond='data:view.isPost'><i class='fa fa-eye' style='color: green'/> <a expr:name='data:post.id'/>  <span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span>  Views</b:if>
 
Go to your Blogger panel and search for the </body> code and add the following code just above it.


<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;); 
var blogStats = new Firebase(&quot;https://fir-1-cbfb4-default-rtdb.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, 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(&#39;name&#39;); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Replace https://fir-1-cbfb4-default-rtdb.firebaseio.com/ link with your own firebase realtime database link in the code above.

If you have done all the steps correctly up to this point, the post view feature will probably be added to your theme without any problems. If the post views feature is not added to your theme, your theme codes may also have more than one <data:post.body/>. Experiment by searching this code a few times and find the right place.
Please don't forget to visit our site often for more Blogger Widgets 2023.
Blogger Widgets
Join the conversation
Post a Comment
Please comment with decency.