بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
يفضل الكثير من أصحاب مدونات بلوجر إضافة عداد لمرات مشاهدة كل موضوع على حدة من موضوعات المدونة أو إظهار عدد مرات التحميل للملفات المتاحة بالمدونة ، هذه الإضافات تكون متوفرة لدى مدونات Wordpress أو للمواقع التى بها إستضافة لأن مثل هذه الإضافات تحتاج إلى قاعدة بيانات وهو ما تفتقده معظم مدونات Blogger
لذلك توفر بعض الخدمات المجانية حل لمدونات بلوجر لإنشاء مثل تلك الإضافات دون أن تحتاج إلى سيرفر مثل موقع Firebase الذى يسمح بإنشاء قاعدة بيانات لمدونات بلوجر والحصول على بيانات عدد المشاهدات وعدد مرات التحميل وتخزينها بحسابك الذى يستوعب مساحة مجانية تصل إلى 5GB .
وإليكم خطوات إنشاء أدوات عدد مشاهدة المشاركة أوعدد مرات التحميل لمدونات بلوجر.
1- توجه إلى لوحة تحكم بلوجر ثم قالب ثم قم بأخذ نسخة إحتياطية من القالب
2- إبحث عن الكود التالى
ثم قم بنسخ الكود التالى لمكتبة jQuery وألصقه أسفل الكود السابق مباشرة
ملاحظة: إذا كان هذا الكود موجود من قبل بقالب مدونتك فلا داعى لإضافته مرة أخرى
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
3- إنشاء حساب بموقع Firebase
4- إنشاء قاعدة بيانات على موقع Firebase (يسمح لك إنشاء حتى 5 قواعد بيانات لحسابك ) فيمكن إنشاء قاعدة بيانات لعدد مشاهدات المواضيع وقاعدة بيانات أخرى لعدد مرات التحميل.
أولا: إنشاء قاعدة بيانات عدد مشاهدات الموضوع على مدونات بلوجر
بعد التسجيل فى الموقع والدخول إلى حسابك
1- قم بإنشاء قاعدة البيانات بإختيار إسم للتطبيق ورابط التطبيق الذى سنحتاجه فيما بعد بإضافة إسم موقعك ثم اضغط Create New App
مثال لرابط التطبيق: https://condaianllkhir.firebaseio.com/
2- توجه إلى لوحة تحكم بلوجر ثم قالب ثم قم بأخذ" نسخة إحتياطية من القالب" ثم إبحث عن الكود التالى
وقم بنسخ الكود التالى ولصقه فوق الكود السابق مباشرة1- قم بإنشاء قاعدة البيانات بإختيار إسم للتطبيق ورابط التطبيق الذى سنحتاجه فيما بعد بإضافة إسم موقعك ثم اضغط Create New App
2- توجه إلى لوحة تحكم بلوجر ثم قالب ثم قم بأخذ" نسخة إحتياطية من القالب" ثم إبحث عن الكود التالى
]]></b:skin>
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibqtVlJedEbOgrT3RpMamsqMplmXw_NQ5o3gxrxqKDkaCRQiyi0FJAaxvBPmOq3rMR-4x9R2F1bniuAFA2dGi6_l0FyIRzBr6VupF6iLf0AzpzCxUZlNE7vCI2hdBEcplMrCwIDwMTfpg/s32-no/Mini+balls.gif') no-repeat right center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: right;
font: bold 12px arial;
color: #333;
}
3- ثم إبحث عن الكود التالى
</body>
<!-- Post Views -->
<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('DrROloading');
var blogStats = new Firebase("https://condaianllkhir.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('DrROloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
مع تبديل الرابط الملون باللون الأصفر برابط تطبيق قاعدة البيانات الخاص بك.
4- الخطوة الأخيرة إبحث عن الكود التالى: إذا وجدت هذا الكود أكثر من مرة فالثانى هو المقصود
<data:post.body/>
ثم قم بنسخ الكود التالى ولصقه فوق الكود السابق مباشرة
<!-- Post Views Counter -->
<div id='views-container'><span class='views-icon'/><div class='views-text'>عدد المشاهدات:</div> <div class='DrROloading viewscount' id='postviews'/></div>
5- إضغط معاينة القالب ثم حفظ
ثانيًا: إنشاء قاعدة بيانات عدد مرات التحميل لمدونات بلوجر
1- قم بإنشاء قاعدة بيانات أخرى كما سبق ولكن بإختيار إسم آخر ورابط آخر للتطبيق ثم اضغط Create New App
</b:skin>
إضغط على سهم توسيع القالب ثم أضف الكود التالى فوق الكود السابق مباشرة
/*----- download counter -----*/
.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibqtVlJedEbOgrT3RpMamsqMplmXw_NQ5o3gxrxqKDkaCRQiyi0FJAaxvBPmOq3rMR-4x9R2F1bniuAFA2dGi6_l0FyIRzBr6VupF6iLf0AzpzCxUZlNE7vCI2hdBEcplMrCwIDwMTfpg/s32-no/Mini+balls.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;
}
</body>
وقم بنسخ الكود التالى فوق الكود السابق مباشرة
<!-- Download Counter starts-->
<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($('[data-download-count=true]'), function (i, e) {
var elem = $(e).parent().find('#download-count').addClass('DrROloading');
var id = $(e).closest('.post-body').siblings('a[name]').attr('name') + "-" + $(e).attr('id');
var downloadStats = new Firebase("https://downloadcount.firebaseio.com/downloads/id/" + id);
var data = {}, isnew = false;
downloadStats.once('value', function (snapshot) {
data = snapshot.val();
if (data == null) {
data = {};
data.value = 0;
data.url = window.location.href;
data.id = id;
isnew = true;
}
elem.removeClass('DrROloading').text(data.value);
});
$(e).click(function (e) {
data.value++;
if (isnew) downloadStats.set(data);
else downloadStats.child('value').set(data.value);
});
});
//<![CDATA[
$(document).ready(function () {
//checks if the number of posts on this page are more than one then return.
if($('.post-outer').length > 1)
return;
//selects the element to be made sticky.
var stickElement = $('.date-header'),
//selects the element which would trigger the sticky elem to go away
hideTrigger = $('#comments'),
//class name to be added (it should match the class in CSS)
fixed = "fixed",
top = stickElement.offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = hideTrigger.offset().top;
if (y >= top && y < maxY) {
stickElement.addClass(fixed);
} else {
stickElement.removeClass(fixed);
}
});
});
//]]>
</script>
<!-- Download Counter Ends-->
مع تبديل الرابط الملون باللون البرتقالى برابط تطبيق قاعدة البيانات الخاص بك.
4- حفظ القالب
5- لإضافة العداد إلى روابط التحميل داخل المشاركة توجه إلى تبويب HTML للمشاركة ثم أضف الكود التالى وبه رابط التحميل
<div style="width:120px;"> <a data-download-count="true" href="رابط التحميل">Download Now!</a> <div class="blog-stats" id="download-count"> </div> </div>
المصادر:
Firebase,MBT
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
بقلم Dr.Rasha Omran
مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة
شكرا جزيلا
ردحذفhttp://www.hamza86.com/
شرح مميز .. جزاك الله خيرا :)
ردحذفشكرا لكى
ردحذفhttp://professionaltop10.blogspot.com/
شكرا كثيرا الله يسعدكِ
ردحذفلقد تم اتباع جميع الخطوات لكن اخي لم اشاهد ا تغير المرجو ان تزور صفحتي وتعطيني رايك هل تمت اضافتها ام لا وشكرا مسبقا لك
ردحذفhttp://alam-tecknoweb.blogspot.com
شكرا
ردحذفhttp://arabdroid1.blogspot.com
شكرًا لمتابعتكم جميعا
ردحذف@Amine aminovish
ربما يكون عدم ظهور الإضافة عدم تنفيذ احد الخطوات
اولا اود ان اشكرك على هذا الموضوع الرائع
ردحذفلقد قمت باتباع جميع الخطوات و الاضافة تعمل و الحمد لله لكن العداد لا يعط عدد المشاهدات لموضوع معين ققط ولكن يعط عدد المشاهدات للمواضيع الاخر كذلك فما الحل وشكرا
@ Ahmed Tounsi
ردحذفتأكد من إضافة الأكواد بطريقة صحيحة حتى يظهر عدد مشاهدات كل موضوع على حده
شكرا لمتابعتك
اولا شكرا على مجهودك
ردحذفثانيا لماذا لا تعمل لدى
http://th3-encyclopedia.blogspot.com/
ارجو الرد عليا
شكرا لكم أخي
ردحذفwww.th3web-ar.blogspot.com
شكرا تم التنفيذ برجاء متابعتى للاطلاع على مدونتى
ردحذفhttp://kasrcom.blogspot.com/
القصر للستائر والركنات
شكرا
ردحذفشكرا جزيلا ، يشرفنى زيارة مدونة أحمد طارق
ردحذفahmedtarik.blogspot.com
جزاكم الله خير....الموقع المشاراليه هل يمكن تحميل الملفات عليه واخذ الرابط...لاني احتاج مركز تحميل ودائم الروابط ...اتمنى افادتي بارك الله فيكم
ردحذفشكرا جزيلا على متابعتك القيمة ..وبالنسبة لمركز رفع الملفات فأفضل جوجل درايف أو Dropbox لما لهم من مميزات رائعة ويمكنك متابعة هذا الموضوع Google driveشرح
حذفشكراً http://www.knophp.com/
ردحذفانا اضفت عداد المشاهدات بنجاح لكن لماذا تكون بعض الصفحات محظورة بسبب موقع firebaseio حيث عندما ادخل لمشرفي المواقع _المواد المحظورة ارى الكثير من الصفحات محظورة بسبب هذا الموقع ارجو الرد والمساعدة
ردحذفهذه المشكلة لم تحدث مع أحد من مستخدمى هذه الإضافة ربما تكون بسبب إضافة أخرى بالقالب يمكن البحث عنها وإزالتها أما إذا إستمرت المشكلة يمكنك التخلى عن عداد المشاهدات وإزالته من موقعك ..قد يفيد هذا الموضوع كيف تحمى مدونة بلوجر من البرامج الضارة والفيروسات؟
حذفأزال المؤلف هذا التعليق.
ردحذفشكرا جزيلا لمتابعتك ولكن تأكد من مراجعة الخطوات و ستعمل بإذن الله
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفيشرفنى متابعتك القيمة وقد قمت بزيارة مدونتك فهى ممتازة من حيث التصميم ولكن أنصح بتقديم محتوى بعيدًا عن الأفلام حقاظًا على حقوق الملكية وحتى تتجنب عقاب جوجل بحذف المدونة..وشكرًا
حذفشكراً لك على الزيارة والنصيحة
حذفالسلام عليكم ورحمة الله وبركاتة
ردحذفكنت اود ان اعرف هل الاضافة الموجودة ماذالت تعمل ام ان المشكلة من عندى علما باننى مبرمج لقوالب بلوجر وقمت بتجربة الاضافة فى اكثر من قالب واذا كان عند حضرتك حل لجعل الاضافة تعمل ساكون شاكر لك ولكى عندى هدية قالب بلوجر احترافى خاص بك.
السلام عليكم ورحمة الله وبركاته
حذفهذه الإضافة تعمل بتقنية jQuery وربما يحدث تعارض بينها وبين أى إضافة أخرى على القالب تعمل بنفس التقنية، لذلك فإنها قد لا تعمل على بعض القوالب..وشكرا جزيلا للمتابعة القيمة
شكرا لكم ... طبعاً وضع زر عدد المشاهدات يعطي رونق جميل للمدونة. تحياتنا لكم ولكل الاخوة والاخوات المعلقين.
ردحذف