Home » , » পোস্ট ভিউ কাউন্তার (Post View Counter) ব্লগারের জন্য

পোস্ট ভিউ কাউন্তার (Post View Counter) ব্লগারের জন্য

Post Views Counter Blogger

ব্লগারে বিভিন্ন পোস্টের ভিতর কোন পোস্টে কয়টা ক্লিক পরছে টা জানার আগ্রহ সবারই থাকে। ওয়ার্ডপ্রেসে পোস্ট ভিউ এর অসংখ্য প্লাগিন থাকলেও ব্লগারে এর জন্য কোন বিশেষ উইজেট (Widget) নেই। কিন্তু একটা বিশেষ প্রক্রিয়াএর মাধ্যমে ব্লগারে এই পোস্ট ভিউ কউন্তার উইজেটটা আনা যায়। তো চলুন এর বিস্তারিত প্রসেস দেখা যাক।

ব্লগারে পোস্ট ভিউ কাউন্তার যুক্ত করার পদ্ধতিঃ


ধাপ-১ঃ এই ওয়েবসাইটটিতে প্রবেশ করুন। এখানে...

FireBase SingUp Box

ধাপ-২ঃ সাইন আপে (Sing Up) ক্লিক করে একটা অ্যাকাউন্ট খুলে নিন প্রয়োজনীয় তথ্য দিয়ে। সাইন আপ করা হয়ে গেলে আপনি ড্যাশবোর্ডে রিডাইরেক্ত (Redirect) হয়ে যাবেন।

Create App Box

ধাপ-৩ঃ অ্যাপ নেম (App Name) ও ইয়উ আর এল বক্সে (Url Box) ইচ্ছামত নাম দিয়ে ক্রিয়েট নিউ অ্যাপে (CREATE NEW APP) ক্লিক করুন।

(লক্ষ্য করুনঃ অ্যাপ (APP) তৈরি করার পর অ্যাপ ইয়উ আর এল (App Url) টা কপি করে রেখে দিন)

ধাপ-৪ঃ এবার ব্লগারড্যাশবোর্ডে যান। তারপর টেম্পলেট (Template)  →এডিট এইচটিএমএলে (Edit Html) ক্লিক করুন।


                    Template Box          Edit Box

ধাপ-৫ঃ নিচের কোডটি খুঁজে বের করুন।
</body>
ধাপ-৬ঃ নিচের কোডটি কপি (Copy) করে উপরের কোডটার আগে যোগ করে দিন।
<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');
var blogStats = new Firebase("https://YOUR-APP-NAME.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.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
(লক্ষ্য করুনঃ YOUR-APP-NAME.firebaseio.com আপনার অ্যাপ ইয়উ আর এল (App Url) দ্বারা পরিবর্তন করুন যেটা প্রথমে তৈরি করেছিলেন।

ধাপ-৭ঃ নিচের কোডটা খুঁজে বের করুন। কোডটা দুইবার পাবেন দ্বিতীয়বার থামতে হবে।
<data:post.body/>
ধাপ-৮ঃ নিচের কোডটি কপি করে উপরের কোডটার আগে যোগ করে দিন।
<i class='fa fa-eye'/> <span id='postviews'/> Views
(লক্ষ্য করুনঃ আপনার ব্লগারে ফন্ট অসাম ইন্সটল (Font Awesome Install) থাকতে হবে। ফন্ট অসাম ইন্সটল না থাকলে ইন্সটল করে নিন।) 

ফন্ট অসাম (Font Awesome) 

ধাপ-৯ঃ নিচের কোডটা খুঁজে বের করুন। 
<head>
ধাপ-১০ঃ নিচের কোডটি কপি করে উপরের কোডটার আগে যোগ করে দিন।
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>
ধাপ-১১ঃ এবার টেম্পলেট সেভ (Templete Save) করে বের হয়ে আসুন।

(লক্ষ্য করুনঃ পোস্ট ভিউ কাউন্তারটা সাথে সাথে ব্লগারে দেখাতে পারে বা  দুই এক দিন সময়ও লাগতে পারে।)

(সংগৃহীত=Collected)