Bd tips tech
এ আপনাদের স্বাগতম।আশাকরি সবাই ভাল আছেন।খুব সহজে ওয়েবসাইট তৈরির দশম পর্বে আজ আপনাদের দেখাবো
কিভাবে ব্লগের প্রতিটি পোস্টের নিচে পোস্ট ভিউ কাউন্টার যুক্ত করা যায়।
এটি যুক্ত করলে
আপনার ব্লগে কোণ পোস্ট কত বার দেখা হয়েছে তা জানতে পারবেন।
 |
| পোস্ট ভিউ কাউন্টার |
তো চলুন দেখে
আসি এটি কিভাবে ব্লগে যুক্ত করবেনঃ
প্রথমে আপানার
একটি Firebase এ Account লাগবে।https://www.firebase.com/ ক্লিক
করুনএরপর ফর্ম ফিলাপ
করে সাইন আপ করুন,
এবং Create New App এ ক্লিক করুন।এরপর
আপনার পছন্দ মতো নাম
দিন (যেমন আমি
দিয়েছি https://bdtipstech.firebaseio.com)।এটি কপি করে রেখে দিন কাজে লাগেব।
এবার ব্লগে
লগ ইন করুন।তারপর Blogger > Template থেকে Template টিকে Backup নিন
এরপর edit html অপশনে ক্লিক করুন এরপর ]]></b:skin> লিখে সার্চ করুন এরপর নিচের কোডটি ]]></b:skin> এর উপরে পেস্ট করুন
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN1xtu60o_qii9065HcpkT8Ueg91BJd5OeBmPjS_Vex6qlhtaVUXx_RNFlih0dK9iGxFXG4Rxsfz0VTQVbRBZcq01t2jwoFUidcenSdYpD0hCtOlV10NcQSjLew0wuQjFVfYRt7ykqRjZn/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/AVvXsEg6jbgHe-eTuX1VnxmkXu5j3osrvM3mZlX2VcKZe0kbdIfMK1w0iDgbGQQSVcGqD0mteKMIaUduqU3gi910sviPjLMJ3qyGTu5E0O6O4oAhPcEgXF-vtv3b8ApaT_QHCF7gjZ_LwmQ0RF27/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
এরপর </body> লিখে সার্চ করুন এবং তার উপরে নিচের JavaScript কোডটি পেস্ট করুন
<!-- Post Views Script by bdtt -->
<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:/bdtipstech.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>
এরপর highlighted
করা অংশটি পরিবর্তন করে
নিজের তৈরি করা URL টি
টাইপ করুন।
এরপর নিচের কোডটি খুঁজুন <data:post.body/>
উপরের
কোডটি বার বার থাকতে পারে, তাই
দ্বিতীয়টিতে ট্রাই করবেন।এরপর
নিচের কোডটি তার উপরে
পেস্ট করুন
<!-- Post Views Counter by bdtt-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>Get code
সবশেষে <head> এর নিচে , নিচের দেওয়া কোডটি পেস্ট করুন।
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>Get code
উপরের কোডটি যদি
আগে এড করা থকে তাহলে এড করার প্রয়োজন নেই
এবার সেভ এ ক্লিক করুন।এবার আপনার ব্লগে গিয়ে দেখুন।কোন সমস্যা হলে কমেন্ট করুন। ধন্যবাদ।
No comments:
আমাদের পোস্টগুলি ভালো লাগলে কমেন্ট করে আমাদের উৎসাহ দিন