اضافة عدد مشاهدة المواضيع لمدونة بلوجر blog post view

بسم الله الرحمن الرحيم

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

لاضافتها بسهولة:

نتبع الخطوات التالية:

1- تسجيل حساب جديد في موقع Firebase .

اضغط هنا للتسجيل في الموقع 

2- بعد التسجيل ناتي الي خطوة انشاء قاعدة بيانات .

3-ستجد مربع انشاء قاعدة بيانات جديدة ضع اي اسم تريده ثم اضغط علي Create . 

4- بعد ذلك سيظهر رابط قاعدة البيانات الخاص بك احفظه جيدا لانك سوف تستخدمه بعد ذلك .

ناتي الي الخطوة الثانية الخاصة باضافة الاكواد

1- نسجل الدخول الي موقع بلوجر و منه الي قالب ثم تحرير HTML

2- الضغط علي توسيع عناصر القالب .

3- الضغط علي CTRL+F

.4- البحث عن ]]></b:skin>

5- قم بوضع الكود التالي فوقه مباشرة

/*-------- Post Views ----------*/

#views-container {

width: 75px;

float: right;

}

.mbtloading {

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxlsE__-vy0Zjtmzp5T5VsD3R_xJ5utsbQqJFxOyCMBf-7przy2jgRkU_7Z3L-lpINOTI9ZRJkljteRPK6qHPn8Rxci4LhoYDCImC9QZuu8zEKTBe6YTAKVg61bjzFwKVamgYYPuxUaCY/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/AVvXsEh_mzUi-pZN-t5441zSVth4EVHenxEprX-T1A5-3o3dxkKcEnJ4IvNFFBqTYPApcPdRMEOIkOHKQwlDM4ntma0NLKs3KrFF-OpnboYFMPC-3_lvatvlBSeyRsC7By6zhCWmL8L-SavxYPvy/s1600/postviews.png') no-repeat left;

border: 0px;

display: block;

width: 16px;

height: 16px;

float: left;

padding: 0px 2px;

}

- لون العداد #EE5D06

- مكان العداد float: right;

6- ابحث عن الكود </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://omermax.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://omermax.firebaseio.com/pages/id/ الى رابط قاعدة البيانات الخاص بك في موقع Firebase الذي قمنا بحفظه في الخطوة الاولي .

7- اخيرا ابحث عن الكود <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>

8- معاينة ثم حفظ القالب

و بكده نكون انتهينا من درسنا اليوم ... لا اريد كلمة شكر فقط شارك الموضوع مع اصدقائك ... و السلام عليكم و رحمة الله و بركاته

شارك هذا المنشور