إضافة عدد القراءات لكل مواضيع بلوجر

الأربعاء، 8 يونيو 2016

إضافة عدد القراءات لكل مواضيع بلوجر

2:02:00 ص إضافات بلوجر , دروس بلوجر , شروحات

السلام عليكم ورحمة الله تعالى وبركاته

موضوعنا اليوم هو حول كيفية إضافة عداد لكل موضوع على المدونة ، بحيث سترى كم مرة تمت زيارة مواضيعك ، وهذه الإضافة فعالة وتعمل أوتوماتيكيا.

أولا لابد أن تسجل على موقع فايرباس firebase كي يمكنك من إضافة الخاصية.

للتسجيل على الموقع من : هنا

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

لا تغلق الصفحة لأننا سنحتاج إلى الرابط الذي عملت. وسيكون هكذا:

Yourname.firebaseIO.com

الآن من مدونتك إذهب إلى تحرير HTML ، قم بأخذ نسخة إحتياطية للقالب

بإستعمال Ctrl + f إبحث عن الوسم ]]></b:skin>

ضع فوقه الكود التالي:

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

        .mbtloading {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipm1V4x2-7EQe5_kqb0cRIUJOaoNEksVkG93zS4XyuX5yJtGzIUPmmT46Z_vcDScJ0-Ff41wocCLwZoT7PgYhdg5pB-XBlSbwuAdmTN522lnNtciDrD7iEQIA69aQTP_rbj3ttxc_e_yZC/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/AVvXsEiRKZUJz3J2ZrHC-Bl9Kas8LgXQm83zwjLkjfn1sNVN2psR9XLScgajYYk5UGaLWXC2zrKzpiceKvcADhlXNuoaME1W6sRWlsbFP7sUCmuuh5tzoAoDKvS8LdLelykWeRwYgDWpoA2uUFc/s1600/adnaneg.png') no-repeat left;
        border: 0px;
        display: block;
        width: 16px;
        height: 16px;
        float: left;
        padding: 0px 2px;
        }

الآن إبحث عن </body>

ضع الكود التالي فوقه:

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

ملاحظة: غير كلمة yourname بالإسم الذي أنشأته على موقع فايرباس.

Yourname.firebaseIO.com

الآن قم بالبحث على الوسم <data:post.body/>

ألصق الكود التالي فوقه تماما

ملاحظة: ربما ستجد الوسم <data:post.body/> مكرر أكثر من مرة فحاول وضع الكود فوق كل واحد إلى أن تتم العملية بنجاح

<div id='views-container'>
    <span class='views-icon'/><div class='views-text'>
    Views:</div>
    <div class='mbtloading viewscount' id='postviews'/>
    </div>

غير كلمة Views بما تريد

إنتهى!

!ممنوع نقل الأكواد لإعادة نشرها في موضوع جديد!

لأي سؤال أو إستفسار أترك تعليقا ، وشكرا

لا نسمح بنسخ مواضيعنا بدون ذكر المصدر، وذكر المصدر يكون عبارة على وضع رابط الموضوع قابل للضغط

ads

هل إستفدت من هذا الموضوع ؟ من فضلك شاركه على :

ليست هناك تعليقات

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

الاشتراك في: تعليقات الرسالة ( Atom )

az21dz

الأربعاء، 8 يونيو 2016