لبلوجر كود جافا سكربت كشف عدد صفحات الموقع تلقائي

مشاهدات الان

يمكنك تنفيذ هذا النوع من الأكواد على مدونة Blogger وتحديثها تلقائيًا. هناك عدة طرق لفعل ذلك، وإليك أحد الطرق الممكنة:

إضافة HTML/Javascript Widget إلى المدونة:

انتقل إلى لوحة تحكم Blogger واختر المدونة التي ترغب في تحديثها
انتقل إلى "قالب" ثم "تخطيط"
اختر مكانًا لإضافة الودجت وانقر على "إضافة إلى تخطيط"
اختر "إضافة قطعة HTML/Javascript"
الصق الكود الذي قمت بكتابته في الخطوة السابقة في مربع النص
احفظ التغييرات
استخدام Google Apps Script:

يمكنك استخدام Google Apps Script لتنفيذ الكود بشكل دوري ونشر النتائج على المدونة. يتطلب ذلك معرفة أكثر تقدمًا بالبرمجة واستخدام Google Apps Script

استخدام ميزة النشر التلقائي:

بعض خدمات الاستضافة توفر ميزة لنشر الملفات تلقائيًا على الإنترنت عندما تقوم بتغييرها محليًا. يمكنك استخدام ميزة مثل هذه لنشر ملف HTML مباشرة على المدونة

مهما اخترت الطريقة، تأكد من فحص واختبار الكود للتأكد من أنه يعمل بشكل صحيح على مدونتك

الكود :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>كشف عدد صفحات الموقع</title>
</head>
<body>

<script>
// احصل على جميع الروابط في الصفحة
var allLinks = document.getElementsByTagName('a');

// تحديد الروابط الداخلة إلى الموقع الحالي
var internalLinks = Array.prototype.filter.call(allLinks, function(link) {
return link.href.indexOf(window.location.hostname) !== -1;
});

// عدد الروابط الداخلة
var numberOfInternalLinks = internalLinks.length;

console.log("عدد الروابط الداخلة إلى الموقع:", numberOfInternalLinks);
</script>

</body>
</html>
بعد نسخ الكود، قم باتباع الخطوات التي تم ذكرها سابقًا لإضافة قطعة HTML/Javascript إلى مدونتك على Blogger. بعد ذلك، سيقوم الكود بعدد الروابط الداخلية على مدونتك ويعرض النتيجة في وحدة التحكم (Console) في متصفح الويب

الكود معي الاستايل المناسب :

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>كشف عدد صفحات الموقع</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>

<div class="container">
<h1>كشف عدد صفحات الموقع</h1>
<div class="result" id="result"></div>
</div>

<script>
// احصل على جميع الروابط في الصفحة
var allLinks = document.getElementsByTagName('a');

// تحديد الروابط الداخلة إلى الموقع الحالي
var internalLinks = Array.prototype.filter.call(allLinks, function(link) {
return link.href.indexOf(window.location.hostname) !== -1;
});

// عدد الروابط الداخلة
var numberOfInternalLinks = internalLinks.length;

// عرض النتيجة في الصفحة
document.getElementById('result').innerHTML = "عدد الروابط الداخلة إلى الموقع: " + numberOfInternalLinks;
</script>

</body>
</html>
هذا الكود يضيف بعض التنسيق للصفحة، بما في ذلك تخطيط الصفحة، والألوان، والشكل العام للنص. يتم عرض نتيجة عدد الروابط الداخلية داخل عنصر div بفئة result. يمكنك تخصيص الأسلوب بما يتناسب مع مظهر مدونتك

وشرح اوضح :

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>كشف عدد صفحات الموقع</title>
<!-- أسلوب التنسيق -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>

<!-- الهيكل الأساسي للصفحة -->
<div class="container">
<h1>كشف عدد صفحات الموقع</h1>
<!-- عنصر لعرض النتيجة -->
<div class="result" id="result"></div>
</div>

<!-- السكربت -->
<script>
// احصل على جميع الروابط في الصفحة
var allLinks = document.getElementsByTagName('a');

// تحديد الروابط الداخلة إلى الموقع الحالي
var internalLinks = Array.prototype.filter.call(allLinks, function(link) {
return link.href.indexOf(window.location.hostname) !== -1;
});

// عدد الروابط الداخلة
var numberOfInternalLinks = internalLinks.length;

// عرض النتيجة في الصفحة
document.getElementById('result').innerHTML = "عدد الروابط الداخلة إلى الموقع: " + numberOfInternalLinks;
</script>

</body>
</html>
هذا التقسيم يجعل الكود أكثر وضوحًا. الأقسام الرئيسية هي:

أسلوب التنسيق (CSS):

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

يتكون من div تحتوي على عنوان h1 وعنصر div لعرض النتيجة
السكربت (JavaScript):

يقوم بحساب عدد الروابط الداخلية وعرض النتيجة داخل عنصر div بفئة result
يمكنك تخصيص كل جزء وفقًا لاحتياجات مدونتك وتفضيلات التصميم الخاصة بك

إرسال تعليق

أحدث أقدم