تعلم البلوجر هكركوز الكويت: عدد المشاهدات بلوجر

عدد المشاهدات الان

1- للبلوجر

الشرح الاولـ "

البحث عن

</head>
أسفله مباشرة فوق

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

توجه إلى قالبك , و ابحث عن :
]]></b:skin>
فوقه مباشرة أضف هذا الكود :

/*-------- Post Views ----------*/
#views-container { width: 85px; float: right; } .DrROloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpG0U2CNpaRFmsqs2JzE9XrkM348HbXx-0Foynsy2ThNP86jjDch_96BYviEs7HDvpOcETSBHmiMAaKQrz888X-X0Fs5Z7mwii987iws34dWKCqdf7dAY9Eh25sf1gW-kP6HUPjbifkEK/s32-no/Mini+balls.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; }

الأن إبحث عن
</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('DrROloading'); var blogStats = new Firebase("رابط.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>

أخر مرحلة , إبحث عن المكان الذي تريد أن تدرج فيه الإضافة بعد إقرأ المزيد أو في تحت العنوان ..الخ ,
يمكنك أن تبحث عن
<data:post.body/>
ستجدها أكثر من مرة , ستحتاج الثانية أو الثالثة حسب قالبك
فوقه مباشرة , ألصق هذا الكود :


<div id='views-container'>
<span class='views-icon'/><div class='views-text'>
عدد المشاهدات:</div>
<div class='DrROloading viewscount' id='postviews'/>
</div>

ثم إضغط حفظ .. ربما تركيب الإضافة معقد قليلا , لذلك أي مشكلة تواجهك أترك تعليقك و سيتم الرد عليه
الشرح الثانيـ *

البحث عن

<head>
أسفله مباشرة فوق

<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');
var blogStats = new Firebase("https://YOUR-APP-NAME.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.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>

والاضافه الاخره البحث عن
1- ان رادت ان يظهر فى اول الموضوع اضفه فوق الوسم : <data:post.body/>
2- ان رادت ان يظهر فى نهاية الموضوع اضفه اسفل الوسم : <data:post.body/>
اضافه الكود

اشخاص شاهدوا الموضوع

وملاحظه تم حفظ الكود
الشرح الثالثـ *

للبحث عن :

<head>
ثم انسخ الكود التالي مباشرة أسفله

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

للبحث عن السطر أسفله :
]]></b:skin>
ثم انسخ فوقه مباشرة الكود التالي

/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZbkaVk88Vb-KvRD6581uNQeR2zy7Jrl3fG4UexEyJ0VP9bZ-wDdg_nJVu1lS0hhCJkk9W3eL9Zw4DU0kTmRbIUz8XqUyZEAgttOxCTB0lvwbXZBGbFBHEeaWcqF6Bda97pO5OGQyYWGI/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;
}

ثم اضغط على Ctrl + F للبحث عن السطر أسفله :
</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('DrROloading');
var blogStats = new Firebase("https://exemple.firebase.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>

تعديل : استبدال الرابط الملون باللون البرتقالي برابط تطبيق قاعدة البيانات الخاص بك
و اضغط مرة أخرى على Ctrl + F للبحث عن السطر أسفله :
<data:post.body/>
ملاحظة : إذا وجدته أكثر من مرة فالثاني هو المقصود
ثم انسخ فوقه مباشرة الكود التالي


<div id='views-container'><span class='views-icon'/><div class='views-text'> عدد المشاهدات : </div> <div class='DrROloading viewscount' id='postviews'/></div>

و في الأخير قم بحفظ القالب
للبحث عن السطر أسفله :
]]></b:skin>
ثم انسخ فوقه مباشرة الكود التالي :

/*----- download counter -----*/
.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpG0U2CNpaRFmsqs2JzE9XrkM348HbXx-0Foynsy2ThNP86jjDch_96BYviEs7HDvpOcETSBHmiMAaKQrz888X-X0Fs5Z7mwii987iws34dWKCqdf7dAY9Eh25sf1gW-kP6HUPjbifkEK/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;
}

ثم اضغط على Ctrl + F للبحث عن السطر أسفله :
</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($('[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.firebase.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>


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

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

أتمنى أن أكون قد وفقت في إيصال
الشرح الرابع *

إبحث عن الكود التالى

<head>
ثم قم بنسخ الكود التالى لمكتبة jQuery وألصقه أسفل الكود السابق مباشرة

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

إبحث عن الكود التالى
]]></b:skin>
وقم بنسخ الكود التالى ولصقه فوق الكود السابق مباشرة

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

.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpG0U2CNpaRFmsqs2JzE9XrkM348HbXx-0Foynsy2ThNP86jjDch_96BYviEs7HDvpOcETSBHmiMAaKQrz888X-X0Fs5Z7mwii987iws34dWKCqdf7dAY9Eh25sf1gW-kP6HUPjbifkEK/s32-no/Mini+balls.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;
}

ثم إبحث عن الكود التالى
</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('DrROloading');
var blogStats = new Firebase("https://condaianllkhir.firebase.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>

مع تبديل الرابط الملون باللون الأصفر برابط تطبيق قاعدة البيانات الخاص بك.
الخطوة الأخيرة إبحث عن الكود التالى: إذا وجدت هذا الكود أكثر من مرة فالثانى هو المقصود
<data:post.body/>
ثم قم بنسخ الكود التالى ولصقه فوق الكود السابق مباشرة


<div id='views-container'><span class='views-icon'/><div class='views-text'> عدد المشاهدات : </div> <div class='DrROloading viewscount' id='postviews'/></div>

إضغط معاينة القالب ثم حفظ
إبحث عن الكود التالى
]]></b:skin>
إضغط على سهم توسيع القالب ثم أضف الكود التالى فوق الكود السابق مباشرة

/*----- download counter -----*/
.DrROloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpG0U2CNpaRFmsqs2JzE9XrkM348HbXx-0Foynsy2ThNP86jjDch_96BYviEs7HDvpOcETSBHmiMAaKQrz888X-X0Fs5Z7mwii987iws34dWKCqdf7dAY9Eh25sf1gW-kP6HUPjbifkEK/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;
}

ثم إبحث عن الكود التالى
</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($('[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://downloadcount.firebase.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>


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

<div style="width:120px;">
<a data-download-count="true" href="رابط التحميل">Download Now!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

وبذلك ستحصل على عدد مرات التحميل
الشرح الخامســ *

وابحث عن
<data:post.body/>
او
<h2 class='post-title entry-title'>
وضع هذا الكود اسفله

<div class="views-7lolblogger">
<div id='views-container'><span class='views-icon'/>
<i class="fa fa-eye takeitall-0"></i><div class='views-text'></div>
<div class='DrROloading viewscount' id='postviews'/>
</div></div>

ثم ابحث عن

</head>

وضع هذا الكود قبله

<script async="" src="http://code.jquery.com/jquery-1.7.0.min.js" type="text/javascript"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

الخطوة الاخيرة ابحث عن

</body>

واضف فوقه

<style>
.views-7lolblogger {
font-size: 13px;
float: right;
color: #666;
margin: 1px 3px;
padding: 0 3px;
clear: both;
width: 100%;
}
.takeitall-0 {
padding-left: 3px;
border-left: 1px solid #ccc;
margin-left: 3px;
width: 18px;
float: right;
}
div#postviews {
float: right;
}
</style>
<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://blog.7lolblogger.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>