شبكة ابو يوسف

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

مرسلة بواسطة روح و ريحان يوم الثلاثاء 0 التعليقات

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

انشاء حساب في موقع Firebase للوصول على قاعدة بيانات مجانية
الخطوة الأولى : إضافة مكتبة jQuery
1- قم بتسجيل الدخول إلى لوحة تحكم مدونتك و اضغط على قالب من القائمة الجانبية.
2- ثم أنقر على "تحرير Html".
* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ
3- بعد ذلك اضغط على Ctrl + F للبحث عن السطر أسفله :

<head>

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

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

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

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

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

مثال لرابط التطبيق : https://exemple.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/AVvXsEggYx01jNkW1t5HBZj01-Tn2BhYxdMS_wnQEZjKB2EzbkZ9RH1TYggB5yDuoMv4R5PH1MhGQo9ieZRnROkcaIzmH_RmLtJmmNdDRj4f3Lq3LMbuAR1hucmGTo09Mf9tCuXB0si1uLz9T2wK/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://exemple.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-exemple.firebaseio.com/
2- بعد ذلك نعود مرة أخرى إلى لوحة تحكم البلوجر ثم قالب ثم "تحرير HTML".
3- و اضغط على Ctrl + F للبحث عن السطر أسفله :

]]></b:skin>

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

/*----- download counter -----*/
    .DrROloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1Yn-jjJV0muCwJI_EDnbESVsP52L3Q_Eu14m8yE57yKhUriN3vk4FNAY7kTOkF5-qiMCzWepAezfpJKCtKNAlupvWZkHpryqkbXy9k80szmzKiR08GgZiGohehyKOlXU1Kdcn8YO17Pi/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-exemple.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 للمشاركة ثم أضف الكود التالي مع وضع رابط التحميل في المكان الملون بالأزرق :

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

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

ساهم في نشر الموضوع للفائدة:

شارك الموضوع

شبكةابويوسف

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

تعليقات

0 تعليقات

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

بحث هذه المدونة الإلكترونية

المشاركات الشائعة

مرحبا بك أنت الزائر رقم

الان على الموقع

عدد الزوار حسب البلدان

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

إقرأ أيضا مواضيع مشابهة

بحث هذه المدونة الإلكترونية

المشاركات الشائعة

مرحبا بك أنت الزائر رقم

الان على الموقع

عدد الزوار حسب البلدان