اضافة عدد مشاهدات الموضوع لمدونات Blogger

السلام عليكم ورحمة الله 
في هذا الموضوع نتكلم عن اضافة جديد وهي اضافة عدد المشاهدات للموضوع 
بجانب العنوان لمدونات بلوجر .
تحسن هذه الاضافة على اقبال الزائرين على موضوع معين 
اضافة رائعة 
والان الى الشرح بدايتا يمكنك مشاهدة مثل من هنا ( معاينة )
لاضافة عدد المشاهدات تابع الخطوات: 
-انشاء حساب في موقع Firebase
للوصول على قاعدة بيانات مجانية وحفظ نسخة احتياطية من عدد مشاهدات الموضوع
اضغط هنا للتسجيل في الموقع
-انشاء قاعدة البيانات
اسفل حسابك ستجد مربع انشاء قاعدة بيانات جديدة ضع اي اسم واضغط Create

سيصبح رابط قاعدة البيانات هكذا https://abda3design.firebaseio.com/

-وضع الاكواد
اذهب الى لوحة التحكم>>قالب ثم قم بعمل نسخة احتياطية للقالب
اضغط على توسيع قوالب عناصر واجهة المستخدم

ابحث عن

]]></b:skin>

ثم ضع فوقه الكود التالي:

كود PHP: 

 

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

#views-container {

width: 75px;

float: right;

}

.mbtloading {

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwzP7JEjUSmbDeptm-lfjqttvKgaqy5rqh0U7jUuWkKpxddnGvhzRLWrMPNwUGLWVZuvUcHieHj93uHLjJ6v1MHf0g6tS84_WaAUbD2Sb3gaiql4CXxn9B9ehC29fY6Twi4BKUp6Ey5tD/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/AVvXsEi3WeyHu7qlnOlLIyvRhdaJDqyv6m9zMy_GBNCJPLhZECnoOezfii0DDmNvZL3KWp8ak6y9vO6B4UAAFI5NDmYSFFYDRJAUKMVrvRtjuceYqRvaNDOMIcLH4scIkdkhVwfwCmvhFohVd8n1/s1600/postviews.png') no-repeat left;

border: 0px;

display: block;

width: 16px;

height: 16px;

float: left;

padding: 0px 2px;

}

لون العداد #EE5D06

float: right; مكان العداد

2- ابحث عن </body> ثم ضع فوقه الكود التالي:

كود PHP: 

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

<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://ahmed-alsaadi.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> 

غير رابط https://abda3design.firebaseio.com الى رابط قاعدة بيانات موقع Firebase

اخيرا ابحث عن <data:post.body/> ثم ضع فوقه الكود التالي لاظهار عدد المشاهدات (ضع العداد في اي مكان يناسبك)

كود PHP: 

 

<!-- Post Views Counter by MBT-->

<div id='views-container'>

<span class='views-icon'/><div class='views-text'>

الزيارات:</div>

<div class='mbtloading viewscount' id='postviews'/>

</div>

الان اذهب الى مدونتك واختر اي موضوع واضغط F5 من الكيبورد وشاهد عدد الزيارت

... نهاية الشرح ...