Ads 468x60px

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

  اليوم موعدنا مع اضافة عداد لمشاهدات المواضيع الخاصة بك علي المدونة …. هذه الاضافة حصرية ولن تجدها في المدونات العربية جميعها

هيا لنبدأ :

الخطوة الاولي :
تسجيل حساب جديد في شركة Firebaso ( وهي شركة استضافة مجانية ) اضغط هنا لتسجيل حساب جديد
الخطوة الثانية :
بناء قاعدة البيانات الخاصة بك علي الشركة وهو اضافة اسم الموقع المراد عمل الاضافة له مثل https://blogadditions.firebaseio.com/
ويمكنك عمله من خلال صندوق الكتابة كما في الصورة التالية اضافة عدد مشاهدات للتدوينة لمدونات
وفي داخل الصندوق قم باختيار اسم قاعدة البيانات الخاصة بك، وبعد الانتهاء قم بكتابة رابط القاعدة جيدا او اكتبه في ملف خارجي .


الخطوة الثالثة :
تركيب الاضافة الي مدونتك علي بلوجر باتباع الاخطوات التالية
1-الذهاب الي لوجة ادارة المدونة .
2- الذهاب الي القالب .
3- حمل نسخة احتياطية من القالب .
4- اضغط علي تعديل القالب ثم اضغط علي توسيع القالب .
5- ابحث عن الكود ]]></b:skin> .
6- اضافة الكود التالي قبل الكود السابق
كود:

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

 

 .mbtloading {     
background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRU_55dk8Cedmo628kO7IMb3JnIfIFmJiK-3C5rlsco_HNg9oemS4Q_JpmSumsWSRstGJ6uLyhkrLuxv6L7RhqUQvX5a7chRIk_B5txq7v5OZ9fP2XBza4tNtyYQLLRoVdzXBrdvzYzVGr/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/AVvXsEgjQxwvNYbYqLjFclqnrcbqtByuS_OeHrNUhIb1W8ZbdWdQXWYxWQEyD9NNBpkm_q3w6bfmNh70znXVFb2ZmpuSAvmsn9vQKLOq9X_nDElLANAeA40haSpKuZq_kJDkZjkrBLlPCunVigvc/s1600/postviews.png')  no-repeat left;      
border: 0px;      
display: block;      
width: 16px;      
height: 16px;      
float: left;      
padding: 0px 2px;      
}
* يمكنك تغيير اتجاه الاضافة من خلال تغيير كلمة left
*يمكنك تغيير لون الاضافة بتغيير الكود #EE5D06
7- نبحث عن الكود <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(&quot;https://blogadditions.firebaseio.com/pages/id/&quot;   $(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>
*لابد من تغيير رابط مدونتي برابط قاعدة البيانات الخاصة بك
8 – ثم ابحث عن الكود <dataاضافة عدد مشاهدات للتدوينة لمدوناتost.body/> وضع الكود التالي قبله
كود:
كود:

 

 <!-- Post Views Counter by MBT-->     
<div id='views-container'><span class='views-icon'/><div  class='views-text'>Views:</div> <div class='mbtloading  viewscount' id='postviews'/></div>
* يمكنك تغيير كلمة view باي كلمة تريدها مثل عدد المشاهدات مثلا او تتركها كما هي .
9- اضافة الكود التالي بعد وسم <head> في القالب
كود:
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
قم بحفظ القالب ومبروك عليك الاضافة الجميلة والجديدة واحدث اضافة في عام 2013

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

إرسال تعليق

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