اضافة عدد زوار التدوينة في بلوجر

لماذا هذه الاداة:

هذه الادات سوف تسمح للزوار برؤية عدد الناس الذين شاهدو التدوينة

اولا انشاء حساب على موقع Firebase :

بعد انشاء الحساب تظهر شاشة وفيها هذا الاطار

نكتب اي اسم ثم نضع اي رابط نختاره مثلا : mahmoodab فيعطيك الموقع رابط وهو mahmoodab.firebaseio.com

بعد ذلك ننتقل الى المدونة ثم القالب ثم ناخذ نسخة احتياطية عن القالب ثم ندخل الى تحرير HTML 

نبحث عن كلمة ]]></b:skin> ونكتب فوقه مباشرة

/*--------  Post Views mahmood ----------*/

#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0roJ1NATI1GfW6x6vMEOLhzm-yOq5KTUHv0GzIGJyyhfyZw7wm30P5X2rPZYFAVILe6X_FKrY0syFE92onWNXBRRiKkTtVEtKIQ6B6fdhASBuuYK99etgL1WwGyRMBV-Sg7icNVaiF14P/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/AVvXsEjhPbJdmYMcmbDywHWqxX7nX70GxDr4FtRh4adfvKiMVGUz41Sa3gQ62IOgNW_DWphpe6gjqru1NgNFqwrXr_CVMk9_WeD6jPC6ZyxQQgd6Xmlo0bL_L7ZL-u06phiaB9zVzYMXW65gbXLy/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

بعدها نبحث عن كلمة </body> ونلصق الكود التالي قبلها تماما

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

<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://mahmoodab.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>

نغير الملون بالاصفر برابط المنشأ سابقا

الان نبحث عن كلمة <data:post.body/>  فنجد ان هناك اكثر من واحدة يمكن تجريبها كلها وغالبا تكون الثانية ونلصق الكود قبلها

<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

يمكنك تغيير كلمة views باي نص 


 فيديو للشرح





النهاية 

Share :

Tweet

✚

Related Post