Wednesday, August 5, 2015
Installing View Counter with Firebase
Installing View Counter with Firebase - This post Arlina Design will share how to install the view counter or display the number of posts are read by visitors by using Firebase.
For those who want to try it, please follow these steps: 1. First, create an account Firebase here Firebase
2. After creating an account, the dashboard page will appear. the contents of the new application data in form fields bottom left like the example below, click create new app.
Then click manage app
Once open, copy the url and paste it in notepad application
Before moving to the next step, make sure your blog template is already there jQuery library. If no post code below before </ head>
3. The next step, go to blogger> Templates> Edit HTML, copy the code below just before ]]> </ b: skin> or </ style>
Then copy the code below just before the </ body>
Replace the code that is marked with the url application data that has been stored in notepad Then look up the code below
Then change to be like this
Note: Put the above code in the post-headers that exist in the markup post, as below
4. Save the template. Note: Figures on the display not display the actual post, because the accounts will be restricted free firebase. If you do not want to be limited please register with premium accounts firebase available on its website.
For those who want to try it, please follow these steps: 1. First, create an account Firebase here Firebase
2. After creating an account, the dashboard page will appear. the contents of the new application data in form fields bottom left like the example below, click create new app.
Then click manage app
Once open, copy the url and paste it in notepad application
Before moving to the next step, make sure your blog template is already there jQuery library. If no post code below before </ head>
<Script src = "// ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' />3. The next step, go to blogger> Templates> Edit HTML, copy the code below just before ]]> </ b: skin> or </ style>
.post-header-line-1 {overflow: hidden}
.viewers {margin: 10px 0; display: table; background: #fefefe; color: # 333; padding: 12px 6px; box-shadow: inset 0 0 0 1px # c9c9c9; cursor: default; font-weight: bold; transition : all .3s ease-out}
.viewers: hover {background: #aaa; color: # fff; box-shadow: inset 0 0 0 1px # 888;}
.viewers .loading {display: inline-block; width: 20px; height: 20px; background: transparent url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81-UBeWOVPSYRZ8PboQbS6MjAkTvXISBxhApFZjWq5LUJot_FyVThlegWjZBSm68FdyYpXGLYcph2jZquV6kuyTSVQBkeg58H4Y0-VByWliMQJ6YDIuowPoUjdzaiEuzNdc6UG14IiEWp/s1600/loader. gif ') no-repeat 0 0; vertical-align: middle}Then copy the code below just before the </ body>
<B: if cond = 'data: the blog.pageType! = & Quot; index & quot;'>
<Script src = 'http: //cdn.firebase.com/v0/firebase.js' type = 'text / javascript' />
<Script type = 'text / javascript'>
// <! [CDATA [
// View counter
$ (Function () {var a = $ (". Viewers"); a.each (function () {var n = $ (this) .attr ("id"), e = new Firebase ("https://softwaresnomi.firebaseio.com/"+ N); e.once (" value ", function (n) {var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</ Script>
</ B: if>Replace the code that is marked with the url application data that has been stored in notepad Then look up the code below
<Div class = 'post-header ">
<Div class = 'post-header-line-1' />
</ Div>Then change to be like this
<Div class = 'post-header ">
<Div class = 'post-header-line-1'>
<B: if cond = 'data: the blog.pageType == & quot; item & quot;'>
<Div class = 'viewers' expr: id =' & quot; obs- & quot; + Data: post.id '> Views & amp; nbsp; <span class =' loading '/> & amp; nbsp; time </ div>
</ B: if>
</ Div>
</ Div>Note: Put the above code in the post-headers that exist in the markup post, as below
<B: includable id = 'post' var = 'post'>
...
...
<Div class = 'post-header ">
<Div class = 'post-header-line-1'>
<B: if cond = 'data: the blog.pageType == & quot; item & quot;'>
<Div class = 'viewers' expr: id =' & quot; obs- & quot; + Data: post.id '> Views & amp; nbsp; <span class =' loading '/> & amp; nbsp; time </ div>
</ B: if>
</ Div>
</ Div>
...
...
</ B: includable>4. Save the template. Note: Figures on the display not display the actual post, because the accounts will be restricted free firebase. If you do not want to be limited please register with premium accounts firebase available on its website.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment