شروحات لتحميلات موضيع مختارة شرح اضافة خاصية عدد المشاهدات والتحميلات لمواضيع المدونة

شرح اضافة خاصية عدد المشاهدات والتحميلات لمواضيع المدونة

شرح اضافة خاصية عدد المشاهدات والتحميلات

السلام عليكم ورحمة الله وبركاته، درس اليوم انشاء الله سوف نشرح خاصية جميلة وفريدة من نوعها وهي شرح طريقة اضافة خاصية عدد المشاهدات والتحميلات لمواضيع مدونة بلوجر.نبدا الشرح على بركة الله.

اولا نبحث عن هذا الكود

<head>

بعد ذالك نقوم بلصق هذا الكود تحته مباشرة

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

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

بعدما قمنا بانشاء رابط للتطبيق، نتوجه الى مدونة بلوجر ثم تحرير القالب ونبحث عن هذا الكود

]]></b:skin>

ثم نقوم بلصق الكود التالي فوق الكود الذي بحثنا عنه
/-------- Post Views ----------/ #views-container { width: 85px; float: right; } .DrROloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6N6a4ktc-pfB4TFIEUMoI5f3bVVoOLoXUvv7Jxm0Q-Cf0yUto80p_xJKH7AFJ360ZgiUDI42M1-3yA95HbjEn5tqulVjLSvaGQCuNQt-lTINZRaGPnmTLs3FoeFM10IK1eh7-xyBBbPlD/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; }

بعد ذالك نبحث عن هذا الكود
</body>

ثم نقوم بوضع هذا الكود فوقه مباشرة مع تغيير هذا الرابط https://mobdi3explain.firebaseio.com/ برابط التطبيق الذي انشئته في موقع Firebase كما هو مشار اليه باللون الازرق
 <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://mobdi3explain.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>

واخيرا نقوم بالبحث عن هذا الكود

<data:post.body/>

ثم نقوم بلصق هذا الكود فوقه مباشرة اي فوق الكود السابق

 <div id='views-container'><span class='views-icon'/><div class='views-text'>عدد المشاهدات:</div> <div class='DrROloading viewscount' id='postviews'/></div>

ملحوظة
اذا وجدت هذا الكود مكرر اكثر من مرة فالكود الثاني هو المقصود

وهكذا نكون قد اضفنا خاصية عدد المشاهدات فقط، نبدا الان بشرح اضافة خاصية عدد التحميلات

اولا نقوم بالتوجه الى موقع Firebase مجددا ثم نقوم بانشاء رابط جديد، بعد ذالك نتوجه الى لوحة التحكم بلوجر ثم تحرير القالب ونبحث عن الكود التالي

</b:skin>

بعد ذالك نضع هذا الكود فوقه مباشرة يعني فوق الكود السابق

/----- download counter -----/ .DrROloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6N6a4ktc-pfB4TFIEUMoI5f3bVVoOLoXUvv7Jxm0Q-Cf0yUto80p_xJKH7AFJ360ZgiUDI42M1-3yA95HbjEn5tqulVjLSvaGQCuNQt-lTINZRaGPnmTLs3FoeFM10IK1eh7-xyBBbPlD/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>

بعد ذالك نقوم بوضع هذا الكود فوق الكود السابق مع تغيير هذا الرابط https://mobd3ex.firebaseio.com/ بالرابط الثاني الذي انشاته في موقع Firebase المشار اليه باللون الاخضر

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

ومن اجل اضافة العداد الى روابط التحميل داخل المشاركات، قم بالتوجه الى تبويب HTML للمشاركة مصحوب برابط التحميل

wnload Now!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

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

عن الكاتبMohamed Alhkae

سيناوي الجنسية و مؤسس مدونة " ترابين كوم" احب الكتابة بالخصوص التدوين، دخل عالم التدوين منذ سنتين و يسعى دائما في تعلم المزيد عن شروحات التدوين ، من هواياته برامج تصميم و الإنترنت و كل ما له علاقة بعالم المعلومات و الحواسيب

مقالات قد تهمك