আপনার blogspot এ লাগিয়ে নিন POST VIEW COUNTER WIDGET টি । আর visitor দের দেখান আপনার কোন post টি কতবার দেখা হয়েছে ।
আচ্ছালামুআলাইকুম আমাদের অনেকেরই এক বা একাধিক blogspot সাইট আছে । আজ আমি আপনাদের দেখাবো কিভাবে আপনার blogspot সাইটিতে post view counter লাগাতে হয় অর্থাৎ আপনার সাইটের কোন post টি কতবার দেখা হয়েছে তা visitor দের দেখানোর জন্য । এটা অনেকটা টেকটিউনসের->
2345 বার দেখা হয়েছে
widget টির মত । তাহলে আসুন শুরু করা যাক ।
প্রথমে এখানে -https://www.firebase.com/signup/গিয়ে signup করুন সাইন আপ সম্পন্ন হলে নিচের মত একটি পেজ দেখতে পাবেন :
এটিকে
নিচের মত করে configure করুন :
এরপর
Next এ দিন । সবকিছু ঠিকঠাক থাকলে নিচের মত একটি page আসবে :
এখন আমাদেরকে একটি database বানাতে হবে । এর জন্য box টিতে আপানার সুবিধামত একটি নাম লিখুন । যেমন-
এরপর Create Firebase বাটনটিতে click করুন । database এর নামটি মনে রাখুন অথবা কোথাও লিখে রাখুন । কারণ তা পরে কাজে লাগবে । সবকিছু ঠিকঠাক থাকলে নিচের মত একটি page আসবে :
এবার
এটি কেটে দিন । এরপর আপনার blogger dashboard এ login করুন । এরপর Template পেজটিতে যান এবং edit html বাটনটিতে ক্লিক করুন ।
এরপর <head> ট্যাগটি খুজেঁ বের করুন এবং এর নিচে
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
কোডটুকু paste করুন । এরপর ]]></b:skin> ট্যগটি খুঁজে বের করুন এবং এর উপরে
/*——– Post Views ———-*/
#views-container {
width: 85px;
float: right;
}.pvloading {
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{
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
/*——– Post Views ———-*/
#views-container {
width: 85px;
float: right;
}.pvloading {
width: 16px;
height: 16px;
}.viewscount {
float: right;
color:rgb(77, 144, 254);
font: bold italic 14px arial;
}.views-text {
float: left;
font: bold 12px arial;
color:rgb(77, 144, 254);
}
#views-container {
width: 85px;
float: right;
}.pvloading {
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{
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
/*——– Post Views ———-*/
#views-container {
width: 85px;
float: right;
}.pvloading {
width: 16px;
height: 16px;
}.viewscount {
float: right;
color:rgb(77, 144, 254);
font: bold italic 14px arial;
}.views-text {
float: left;
font: bold 12px arial;
color:rgb(77, 144, 254);
}
কোডটুকু paste করুন । এরপর </body> ট্যগটি খুঁজে বের করুন এবং এর উপরে
<!-- post views script -->
<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('pvloading');
var blogStats = new Firebase("https://shefat.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('pvloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
<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('pvloading');
var blogStats = new Firebase("https://shefat.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('pvloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
কোডটুকু paste করুন । code টিতে দেখুন shefat লেখাটি bold করা আছে shefat লেখাটি কেটে আপনার database এর নামটি বসিয়ে দিন ।
এরপর <div class='postmeta-primary'> ট্যাগটি খুঁজে বের করুন এবং এর নিচে
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='pvloading viewscount' id='postviews'/></div>
কোডটুকু paste করুন । কাজ শেষ । যদি সব কিছু ঠিকঠাক করে থাকেন তাহলে নিচের মত একটি post view counter দেখতে পাবেন ।
সবাইকে ধন্যবাদ । ভাল লাগলে অবশ্যই কমেন্ট করবেন । আর আমার জন্য সবাই দোয়া করবেন ।
আমিএবার 2014 YERS AR HSC EXAMINNER PLEASE PRAY FOR ME ।
এরপর <div class='postmeta-primary'> ট্যাগটি খুঁজে বের করুন এবং এর নিচে
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='pvloading viewscount' id='postviews'/></div>
কোডটুকু paste করুন । কাজ শেষ । যদি সব কিছু ঠিকঠাক করে থাকেন তাহলে নিচের মত একটি post view counter দেখতে পাবেন ।
সবাইকে ধন্যবাদ । ভাল লাগলে অবশ্যই কমেন্ট করবেন । আর আমার জন্য সবাই দোয়া করবেন ।
আমিএবার 2014 YERS AR HSC EXAMINNER PLEASE PRAY FOR ME ।
No comments:
Post a Comment