إضافة عداد يحسب عدد مشاهدة المواضيع وعدد مرات التحميل على مدونات البلوجر

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

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

إليكم الآن خطوات إنشاء إضافة عداد يحسب عدد مشاهدة المواضيع وعدد مرات التحميل على مدونات البلوجر :

الخطوة الأولى : إضافة مكتبة jQuery

1- قم بتسجيل الدخول إلى لوحة تحكم مدونتك و اضغط على قالب من القائمة الجانبية.

2- ثم أنقر على "تحرير Html".

* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ ( تعلم كيف تقوم بأخد نسخة إحتياطية لقالب مدونتك و استرجاعها عند الضرورة ).

3- بعد ذلك اضغط على Ctrl + F للبحث عن السطر أسفله :

<head>

4- ثم انسخ الكود التالي مباشرة أسفله:

*ملاحظة : إذا كان هذا الكود موجود من قبل داخل قالب مدونتك فأنت لست معنيا بهذه الخطوة.

الخطوة الثانية : إنشاء حساب على موقع Firebase

1- قم بالدخول لموقع Firebase و أنشئ حسابك الخاص.

2- بعد التسجيل في الموقع ادخل لحسابك.

الخطوة الثالثة : إنشاء قاعدة بيانات خاص بعدد مشاهدات الموضوع على مدونات بلوجر

1- الآن سنقوم بإنشاء قاعدة البيانات وذلك بإدخال إسم للتطبيق ورابط التطبيق (سنحتاجه فيما بعد) ثم اضغط على Create New App.

مثال لرابط التطبيق : https://afkarpro.firebaseio.com/

2- بعد ذلك نعود إلى لوحة تحكم البلوجر ثم قالب ثم "تحرير HTML".

3- و اضغط على Ctrl + F للبحث عن السطر أسفله :

]]></b:skin>

4- ثم انسخ فوقه مباشرة الكود التالي :

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

    .DrROloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Oe4c6hkBUFKk0vp23RSrUI6IeSI9Y1f-XGrZt86miphq3FkQI2WdZwfIaDjMz6jxj2_IoL-qACEm2RvtOoptHho1tOJ5GZI8Yqrj9xXrHcZYW_T8Oc7Syx5PonY2HcoKYVT1t-K0EjwI/s1600/Waiting-afkarpro.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;
    }

5- ثم اضغط على Ctrl + F للبحث عن السطر أسفله :

</body>

6- ثم انسخ فوقه مباشرة الكود التالي :

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

* تعديل : استبدال الرابط الملون باللون البرتقالي برابط تطبيق قاعدة البيانات الخاص بك.

7- و اضغط مرة أخرى على Ctrl + F للبحث عن السطر أسفله :

<data:post.body/>

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

8- ثم انسخ فوقه مباشرة الكود التالي:

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

9- و في الأخير قم بحفظ القالب.

الخطوة الرابعة : إنشاء قاعدة بيانات عدد مرات التحميل لمدونات بلوجر

1- الآن سنقوم بإنشاء قاعدة البيانات أخرى بإسم ورابط تطبيق مختلفين (الرابط سنحتاجه فيما بعد) ثم اضغط على Create New App.

رابط التطبيق هنا هو : https://downcount-afkarpro.firebaseio.com/

2- بعد ذلك نعود مرة أخرى إلى لوحة تحكم البلوجر ثم قالب ثم "تحرير HTML".

3- و اضغط على Ctrl + F للبحث عن السطر أسفله :

]]></b:skin>

4- ثم انسخ فوقه مباشرة الكود التالي :

/*----- download counter -----*/
    .DrROloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfE1l_LpAF8dCxAx0AlM9hz17Cn4WlOCW3_JLr1Q9jLb_QecH5gTAy8IMmY7OVLgeDr0qqOyXdca1Tgdz1ihpiXca3n770Vw_IzXzDGBFu3Iqq8OO0AaB_FJpVD6ZzTidphgb5fyOgJI0/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;
    }

5- ثم اضغط على Ctrl + F للبحث عن السطر أسفله :

</body>

6- ثم انسخ فوقه مباشرة الكود التالي :

<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://downcount-afkarpro.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>

* تعديل : استبدال الرابط الملون باللون البرتقالي برابط تطبيق قاعدة البيانات الخاص بك.

7- ثم قم بحفظ القالب.

8- لإضافة العداد إلى روابط التحميل داخل مواضي مدونتك، توجه إلى تبويب HTML للمشاركة ثم أضف الكود التالي مع وضع رابط التحميل في المكان الملون بالأزرق :

<div style="width:120px;">
<a data-download-count="true" href="ضع رابط التحميل هنا">Download Now!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفظه