Friday, October 11, 2013

আপনার blogspot এ লাগিয়ে নিন POST VIEW COUNTER WIDGET টি । আর visitor দের দেখান আপনার কোন post টি কতবার দেখা হয়েছে ।

আপনার blogspot এ লাগিয়ে নিন POST VIEW COUNTER WIDGET টি । আর visitor দের দেখান আপনার কোন post টি কতবার দেখা হয়েছে ।

Information

আচ্ছালামুআলাইকুম আমাদের অনেকেরই এক বা একাধিক 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);
}
কোডটুকু 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(&quot;https://shefat.firebaseio.com/pages/id/&quot; + $(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 ।

No comments:

Post a Comment