كيفية اضافة عدد مشاهدات الموضوع بجانب العنوان لمدونات في بلوجر ~ مدونة ابويوسف

الزيارات:

كيفية اضافة عدد مشاهدات الموضوع بجانب العنوان لمدونات في بلوجر

مرسلة بواسطة روح و ريحان يوم 1 التعليقات

السلام عليكم ورحمة الله تعالى وبركاته

اضافة جديدة

كيفية اضافة عدد مشاهدات الموضوع بجانب العنوان لمدونات في بلوجر

في هذا الموضوع نتكلم عن اضافة جديد وهي اضافة عدد المشاهدات للموضوع بجانب العنوان لمدونات بلوجر . تحسن هذه الاضافة على اقبال الزائرين على موضوع معين اضافة رائعة والان الى الشرح لاضافة عدد المشاهدات تابع الخطوات:

انشاء حساب في موقع Firebase للوصول على قاعدة بيانات مجانية

طريقة انشاء حساب في الموقع

للتسجيل فى الموقع اضغط على الرابط التالى :- اضغط هنا

بعد ذلك قم بانشاء قاعدة البيانات اسفل حسابك

ستجد مربع انشاء قاعدة بيانات جديدة App Name - App URL - ???.firebaseIO.com

ضع اي اسم واضغط Create New App

سيصبح رابط قاعدة البيانات هكذا مثلا: https://youss10.firebaseIO.com/

طريقة وضع الأكواد

اذهب الى لوحة التحكم>>قالب ثم قم بعمل نسخة احتياطية للقالب
ابحث عن ]]></b:skin>
ثم ضع فوقه الكود التالي:

/*-------- Post Views ----------*/
#views-container {
width: 75px;
float: right;
}

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0Q9k7LqKjxt-lRMyQJweZlyx2gm3NQWjEZRzgt4RKbNhK8TLhXz4C0ED5mZu0q9bWXvPMBg0kGRT1vMWgxWGVn_Ar2CaNhLmhw9eOaFBp3q8SbthIOq7_sHg_aQtE12UBr4S1KkYXybZ/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/AVvXsEjg48J78YmcbcdYmQGcPklsyuZA_GDUr6ED-Cyse3_s5jGGL_Ym89Wqh1V2RCqTMUbfRc1sbQTd-3jbT-8GkP36GKNr0pfBrM5pJd4c8Gp7n89tasmCmSymFfcEQyvZSAl4fmzacGPshRM/s1600/adnaneg.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

ابحث عن الكود التالى:- </body>

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

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

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


<div id='views-container'>
<span class='views-icon'/><div class='views-text'>
الزيارات:</div>
<div class='mbtloading viewscount' id='postviews'/>
</div>