-->

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

كيفية اضافة عدد مشاهدات الموضوع بجانب العنوان لمدونات في بلوجر بأحدث الطرق
    بسم الله الرحمن الرحيم

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

    طريقة انشاء حساب في موقع Firebase

      لتسجيل فى الموقع اضغط على الرابط التالى :- اضغط هنا

    -انشاء قاعدة البيانات اسفل حسابك ستجد مربع انشاء قاعدة بيانات جديدة ضع اي اسم واضغط Create Firebase
    سيصبح رابط قاعدة البيانات هكذا https://clubup-9.firebaseio.com/
     

    طريقة وضع الاكواد

    اذهب الى لوحة التحكم>>قالب ثم قم بعمل نسخة احتياطية للقالب
    ابحث عن ]]></b:skin>
    ثم ضع فوقه الكود التالي:  
     /*-------- Post Views ----------*/
    #views-container {
    width: 75px;
    float: right;
    }

    .mbtloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYaD_oMtIQ7AptLeQRnHMAMKpcRKU3HNtu_MSDEHJt_NR_8A4aiEdW2AJo4ky2bwFNe2PZ2NUurbw1XB72RAyuXJFxkdaa3T_M4YDEYXumqbwCUgy2Gm3O-vOERU8S7JMLFdZiq7BqtF-/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/AVvXsEhBuCv24Fs5BAaz7PBULdC4xO7g-A56-Y31tDANEIZpjqDkYMkWAS_bVtsnGWGAbiDoP6oiVJ1sE5QAyKCi2dkpc6GoJGYagO4VdDNZNhAY-paPW6ZIR5uk0zH1crfzx5C4DkEB8j8Uoikp/s1600/postviews.png') no-repeat left;
    border: 0px;
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 0px 2px;
    }
      ابحث عن الكود التالى:- </body>
     ثم ضع فوقه الكود التالى:
      <!-- Post Views Script by MBT -->
    <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('mbtloading');
    var blogStats = new Firebase("https://clubup-9.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://clubup-9.firebaseio.com الى رابط قاعدة بيانات موقع Firebase

    اخيرا ابحث عن <data:post.body/>
    ثم ضع فوقه الكود التالي لاظهار عدد المشاهدات (ضع العداد في اي مكان يناسبك)
    <!-- Post Views Counter by MBT-->
    <div id='views-container'>
    <span class='views-icon'/><div class='views-text'>
    الزيارات:</div>
    <div class='mbtloading viewscount' id='postviews'/>
    </div>
     
      ثم احفظ القالب ومبروك عليك تركيب الاداة
    أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم. 

    Mohamed Shaban
    @مرسلة بواسطة
    كاتب ومحرر في مدونة : مدونة انتا الكسبان .

    إرسال تعليق