Ads By Blogger

Monday, August 14, 2023

খুব সহজে ওয়েবসাইট তৈরি(পর্ব-১০)ব্লগের পোস্টের টাইটেলের নিচে যুক্ত করুন পোস্ট ভিউ কাউণ্টার

ads
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;

}

Get code
কাস্টমাইজেসন- চাইলে #EE5D06 এবং right কে left তে পরিবর্তন করে নিতে পারেন

এরপর </body>  লিখে সার্চ করুন এবং তার উপরে নিচের JavaScript কোডটি পেস্ট করুন

<!-- Post Views Script by bdtt -->

<script type='text/javascript'>

    window.setTimeout(function() {

        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);

      }, 10);

  </script>

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>

<script>

$.each($(&#39;a[name]&#39;), function(i, e) {

var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);

var blogStats = new Firebase(&quot;https:/bdtipstech.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));

blogStats.once(&#39;value&#39;, 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(&#39;name&#39;);

isnew = true;

}

elem.removeClass(&#39;mbtloading&#39;).text(data.value);

data.value++;

if(window.location.pathname!=&#39;/&#39;)

{

if(isnew)

blogStats.set(data);

else

blogStats.child(&#39;value&#39;).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

উপরের কোডটি যদি আগে এড করা থকে তাহলে এড করার প্রয়োজন নেই
এবার সেভ ক্লিক করুনএবার আপনার ব্লগে গিয়ে দেখুন।কোন সমস্যা হলে কমেন্ট করুন ধন্যবাদ
ads

No comments:

Leave A Comment

আমাদের পোস্টগুলি ভালো লাগলে কমেন্ট করে আমাদের উৎসাহ দিন

copyright 2014-2023@bdtipstech DMCA.com Protection Status