ok. ikuti tutorial di bawah ini walau terpaksa .... ^_^ :
Posted by Mohammad Mustafa Ahmedzai on 2/20/2013
Yes you heard it right, all BlogSpot blogs will now be able to display a dynamic count for individual pageviews. We can now easily create this post view counter without worrying about servers or server code. With a free service like Firebase you can now create dynamic and data-driven plugins for blogger without worrying about backend development. Firebase was launched in April 2012 and since then it had been the hub for developers. Amazingly this free plan gives you 10GB Free bandwidth and 5GB Free storage. Which in our case is more than required! We had been lucky to utilize this free service for blogger platform and create some amazing scripts with the help of our developer Ahmed Nasir. Today's tutorial will help you to install a dynamic script that will automatically increment its initial count value when a visitor views your blog posts. The counter data will be stored on a free database provided by Firebase.
Note: The postviews count wont change when you refresh the blog homepage but it will change only when you visit individual posts.
1. Create your Firebase Account
In order to gain access to a free database and be able to keep a backup of your postviews counter data, you must sign up for a free account at Firebase.
Click here to sign up now!
Fill up the easy steps sensibly and then once your account has been activated, you must create your first Firebase database.
2. Create a Firebase Database
You can create 2 firebases. At present just create one, we will guide you later in coming posts about amazing things you can play with this free service.
1. Towards the bottom right side of your account, you will find the following submit box.
2. Inside this box input your website name. In my case I inserted fafansukaislam and this generated the following firebase URL: https://fafansukaislam.firebaseio.com
fafansukaislam ini beda dengan artikel aslinya, hasil yg aku bikin. & ada yg sedikit aku rubah juga.pada artikel di bawah :)
3. Finally hit the create button and note down your firebase URL because we would need it later in this tutorial.
3. Installing Postviews Plugin
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Tick the box "Expand widget Templates"
- Search for ]]></b:skin>
- Just above it paste the following CSS code:
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7wY1Qj0uNTs8HUL5jTUusHkBZT8BFCkgi8knp3mJi_pI2RuOXUc5IC0QoOehSWmze1wCHNKXxq4z185FVz3NM3eUFOFcbsHAwM999MwEOulYoHtcJuhdb7xhcMI3wqpwFLqBnJAZOlVr/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFx0LkBXkkrzXuLw3yV1RUCwAkENUo3XUc0KzzGp8PUqdwRnooHz2mcjvsex4moOXf4wZjHpySILocl8Dfm9H6WAOzpVS36XbHeVNgfe7n47N68MNoO6mDVtU9j7Ic6FFbkuCt2ymsFTLx/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
Customizations:
To change the text color of the numeric count, edit #EE5D06
To change the plugin alignment, change right to left.
7. Next search for </body> and just above it paste the following JavaScript code:
<!-- Post Views Script salam kenal namaku fafan -->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<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').addClass('mbtloading');
var blogStats = new Firebase("https://fafansukaislam.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.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
Make this change:
Replace the highlighted brown line with your firebase URL (Step#2). Make sure you replace it correctly by taking care of forward slash (/)
8. Now one last step. Find this code:
<data:post.body/>
Note: If you are finding multi occurrences of the same code then choose the first occurrence.
9. Just above it paste the following HTML,
<!-- Post Views Counter by MBT-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
You can replace views: with any text you like.
10. Now the final step, paste the following jquery link just below <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
11. Hit save and you are all done!
Visit your blog and press F5 (refresh page) to see the counts dancing just perfectly! :)
Bagaimana sedulur sedoyo, pun ngertos ? semoga anda berhasil, walau sempoyongan, xixixii... mengingatkan aku pada lirik lagu " cak angon 2x penekno blimbing kuwi, lunyu 2x penekno ..... " kyae judul lagunya lir ilir. keren itu guys.
Mohon maaf bila ada salah kata, bila anda masih belum faham silahkan komen, terimakasih artikel ini mengulas tentang Display Post Views Count in Blogger
Backlink here..
{ 0 komentar... Views All / Send Comment! }
Posting Komentar