اضافة عداد زوار لكل موضوع للمدونة

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

اضافة عداد زوار لكل صفحة او موضوع

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

كيف اضافة عداد زوار لكل صفحة او موضوع على حدة تابع الخطوات وطبقها :

الخطوة الاولي : الاشتراك فى موقع تخزين البيانات المجاني firebase :

كما شرحت سابقا ان تشترك فى موقع تخزين البيانات المجاني لمساعدتك على تخزين البيانات بدون التاثير على سرعة المدونة .

للاشتراك :::::::: https://www.firebase.com/signup/

تخزين البيانات العداد

- اضف دومين المدونة بدون بلوج سبوت مثلا اذا كان الرابط هكذا http://marketingande-commerce.blogspot.com/
فاضف فقط marketingande-commerce

تخزين بيانات العداد

- ثم سيظهر رابط مخصص لك فى الموقع ولوحة تحكم لمتابعة احصائيات زوار مدونتك . ثم انتقل لحسابك

تخزين بيانات العداد 

الخطوة الثانية : وهى اضافة اداة عدادا الزوار الى قالبك :

تحرير قالبك

- اذهب الى لوحة التحكم .
- ثم الى تحرير هتميل  Edit/HTML .

- البحث عن هذا الكود ]]></b:skin>

ولتسهيل عملية البحث اضغط على CTRL+F
- ثم الصق الكود التالى فوق الكود السابق او هذا الكود ]]></b:skin>

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

#views-container { 

width: 85px; 

float: right; 

}

.mbtloading { 

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcvieb5MJ9-M5-EzCwYXqsK_VRQM-4uLVjKu64iXNAiWEhtS0Hm9z3XhoRwpji42-J8fs2X-dpfCTqyDN2Z5ZyNC-y5XLSWTgnL8v8uoRiXiL1iK1j8fuxt0SzaMZuEn9N-Jc1Kdc_tuy/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/AVvXsEgcY3kHbd_MgIl7A4ECl0HQ-8NelLLm3za9ejre1PKuiZJKxebH77LtWTD2ZFQI255hdvSWnXdfPg_AZ0OzmgD1nR_oTMwH89mzrPNBXmCXQH5EJBGEJZ4Vi4tqsQcrsvESoMGkbBLBZxul/s1600/postviews.png') no-repeat left; 

border: 0px; 

display: block; 

width: 16px; 

height: 16px; 

float: left; 

padding: 0px 2px; 

}

لتعديل على الكود :

كل ماهو علية خلفية برتقالي هو لتعديل :
- لتعديل على الاتجاة العداد الزوار من اليمين يبقى right من الشمال يبقى left لو عربي يبقى خلية من الشمال لو المدونة اجنبي اتركة من اليمين .

- تعديل اللون  #EE5D06

- لتعديل الصورة او ايقونة العداد غير هذا الرابط الموجود فى الكود السابق 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcY3kHbd_MgIl7A4ECl0HQ-8NelLLm3za9ejre1PKuiZJKxebH77LtWTD2ZFQI255hdvSWnXdfPg_AZ0OzmgD1nR_oTMwH89mzrPNBXmCXQH5EJBGEJZ4Vi4tqsQcrsvESoMGkbBLBZxul/s1600/postviews.png

الخطوة الثالثة : ابحث عن هذا الكود :

ابحث عن هذا الكود
</body>
 ثم اضف الكود التالي فوق الكود اللى فوق ... 

<!-- Post Views Script by MBT --> <br /> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script> <br /> <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://mybloggertricks.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://diet-tips7.firebaseio.com/

الخطوة الرابعة : البحث عن هذا الكود  فى قالب مدونتك :

ابحث عن هذا الكود
<data:post.body/>
 ثم الصق فوقة هذا الكود
<!-- Post Views Counter--> <br /> <div id='views-container'> <span class='views-icon'/><div class='views-text'> Views:</div> <div class='mbtloading viewscount' id='postviews'/> </div>

تعديل على هذ الكود :

قبل اضافة الكود عدل على الكلمة المظللة بالبرتقالى او هذة الكلمة  : Views  وعدلها بالعربى اواذا ارد مثلا كتاية زوار بدلا من Views 

الخطوة الاخيرة : البحث عن هذا الكود 

فى قالبك .
ابحث عن هذا الكود
<head>

 ثم الصق الكود التالى اسفلة ..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

ثم اعمل معاينة قبل الحفظ ضرورى حتى لا يحدث مشاكل فى قالبك ثم احفظة القالب . وشاهد التعديلات على موضوعات مدونتك وكيف استطعت اضافة اداة عداد زوار لكل صفحة او موضوع من موضوعات المدونة .

الاقتراحات وشكاوي :

اذا كان لديك اى استفسار او شكوى من المدونة او المووضوع او اقتراحات فلا تتردد ابدا فى ابداء رايك على الموضوع او او الاتصال بنا .

شاركنا فيسبوك جوجل بلس