مكتبة أكواد بلوجر الاحترافية
أدوات وإضافات احترافية مطورة خصيصاً لمنصة بلوجر.
إضافة وسم Canonical آلياً
كود لتوحيد الروابط ومنع مشاكل المحتوى المكرر في محركات البحث.
<script>var link=document.createElement('link');link.rel='canonical';link.href=window.location.href;document.head.appendChild(link);</script>جدول محتويات تلقائي (Auto TOC)
يولد قائمة من العناوين الفرعية داخل المقال لتحسين تجربة المستخدم وأرشفة جوجل.
<script>document.addEventListener("DOMContentLoaded",function(){const h=document.querySelectorAll(".post-body h2,.post-body h3");if(h.length>0){let t="<ul id='toc'>";h.forEach((x,i)=>{x.id="h-"+i;t+=`<li><a href="#h-${i}">${x.innerText}</a></li>`;});t+="</ul>";document.querySelector(".post-body").prepend(document.createRange().createContextualFragment(t));}});</script>حساب وقت القراءة المتوقع
يعرض للزائر الوقت التقريبي اللازم لإنهاء قراءة المقال الحالي بناءً على عدد الكلمات.
<script>const txt=document.querySelector(".post-body").innerText;const wpm=200;const min=Math.ceil(txt.split(" ").length/wpm);console.log(min+" min read");</script>رابط المصدر عند النسخ
يضيف رابط مقالك تلقائياً عند قيام أي شخص بنسخ نص من مدونتك لحماية الحقوق.
<script>document.addEventListener('copy',(e)=>{const s=window.getSelection();e.clipboardData.setData('text/plain',s+'\n\nالمصدر: '+window.location.href);e.preventDefault();});</script>تسريع الصور (Lazy Load)
يضيف خاصية التحميل الكسول للصور لزيادة سرعة فتح الصفحة وتحسين Core Web Vitals.
<script>document.querySelectorAll('img').forEach(i=>i.setAttribute('loading','lazy'));</script>زر مشاركة واتساب عائم
زر يظهر لمستخدمي الجوال لمشاركة المقال بسهولة عبر الواتساب.
<a href="whatsapp://send?text=" onclick="location.href='whatsapp://send?text='+window.location.href;return false;" style="position:fixed;bottom:20px;right:20px;background:#25d366;color:#fff;padding:15px;border-radius:50%;z-index:99;">WA</a>تحديث سنة الحقوق آلياً
يقوم بتغيير سنة حقوق النشر في الفوتر تلقائياً في أول كل عام جديد.
<script>document.write(new Date().getFullYear());</script>شريط إعلان علوي ثابت
شريط بسيط في أعلى الموقع للتنبيه عن تحديثات هامة دون إزعاج القارئ.
<div style="background:#ffcc00;text-align:center;padding:8px;position:sticky;top:0;z-index:1000;font-weight:bold;">إعلان هام هنا!</div>روابط Nofollow تلقائية
يحافظ على قوة السيو عبر إضافة وسم nofollow لكل الروابط الخارجية آلياً.
<script>document.querySelectorAll('a').forEach(l=>{if(l.hostname!==window.location.hostname){l.setAttribute('rel','nofollow noopener');l.setAttribute('target','_blank');}});</script>التمرير السلس (Smooth Scroll)
يجعل التنقل داخل الصفحة عبر الروابط الداخلية مريحاً ومنظماً للعين.
<style>html{scroll-behavior:smooth;}</style>الوضع الليلي (Dark Mode)
يتيح للمستخدم التبديل بين الألوان الفاتحة والمظلمة مع حفظ الاختيار.
<script>const t=()=>document.body.classList.toggle('dark-mode');</script>مسارات التنقل (Breadcrumbs)
إضافة بيانات Schema لمساعدة جوجل في فهم هيكلية أقسام مدونتك.
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"}]}</script>تفعيل النسخ لكل الأكواد
يضيف زر نسخ تلقائي لكل وسم <pre> في جميع مقالات المدونة.
<script>document.querySelectorAll('pre').forEach(p=>{let b=document.createElement('button');b.innerText='Copy';b.onclick=()=>navigator.clipboard.writeText(p.innerText);p.appendChild(b);});</script>تكبير الصور (Lightbox)
يسمح للزوار بتكبير صور الشروحات عند النقر عليها لمعاينة أفضل.
<style>.post img:active{transform:scale(1.5);transition:0.3s;}</style>كاشف مانع الإعلانات (AdBlock)
ينبه الزائر بضرورة تعطيل مانع الإعلانات لدعم استمرار المدونة.
<script>window.onload=()=>{if(!document.getElementById('ads-check'))alert('Please disable AdBlock');};</script>تمييز الروابط الخارجية
يضيف أيقونة تلقائية بجانب الروابط الخارجية لزيادة الشفافية وتحسين السيو.
<style>a[href^="http"]:not([href*="yoursite.com"])::after{content:' 🔗';font-size:10px;}</style>واجهة بحث كاملة الشاشة
يحول البحث التقليدي إلى واجهة عصرية تغطي الشاشة للتركيز على النتائج.
<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:none;">Search...</div>عداد سرعة تحميل الصفحة
أداة تقنية تظهر سرعة استجابة الموقع بالملي ثانية لإعطاء طابع احترافي.
<script>window.onload=()=>console.log('Load time: '+(performance.now()/1000).toFixed(2)+'s');</script>زر العودة للأعلى الذكي
زر يظهر عند التمرير للأسفل ويسمح بالعودة للقمة بلمسة واحدة.
<button onclick="window.scrollTo(0,0)" style="position:fixed;bottom:20px;left:20px;">UP</button>حماية الإيميل من السبام
يخفي بريدك الإلكتروني عن البوتات ويظهره فقط للمستخدمين الحقيقيين.
<script>document.write('info' + '@' + 'domain.com');</script>نظام الأسئلة الشائعة (Accordion)
تصميم منسدل لعرض الأسئلة والأجوبة بشكل منظم يوفر مساحة في الصفحة ويحسن السيو.
<details style="border:1px solid #eee; padding:10px; border-radius:5px;">
<summary style="cursor:pointer; font-weight:bold;">السؤال الأول هنا؟</summary>
<p>الإجابة التفصيلية تظهر هنا عند النقر.</p>
</details>تنسيق شريط التمرير (Scrollbar)
تغيير شكل شريط التمرير التقليدي في المتصفح ليتناسب مع ألوان وتصميم مدونتك.
<style>
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #007bff; border-radius: 10px; }
</style>زر نسخ رابط الصفحة الحالي
زر بسيط يسمح للزائر بنسخ رابط المقال بضغطة واحدة لمشاركته مع الآخرين.
<button onclick="navigator.clipboard.writeText(window.location.href);alert('تم نسخ الرابط!')">نسخ رابط المقال</button>جعل الجداول متجاوبة مع الجوال
يمنع خروج الجداول الكبيرة عن حدود الشاشة في الجوال عبر إضافة شريط تمرير أفقي تلقائي.
<style>
.table-container { overflow-x: auto; display: block; width: 100%; }
</style>
<!-- ضع الجدول داخل div يحمل كلاس table-container -->عداد تنازلي لروابط التحميل
يجبر الزائر على الانتظار لثوانٍ قبل ظهور زر التحميل، مما يزيد من وقت البقاء في الصفحة.
<div id="msg">سيظهر الرابط خلال 10 ثوانٍ...</div>
<script>
let count = 10;
let timer = setInterval(() => {
count--;
document.getElementById('msg').innerText = "انتظر " + count + " ثانية";
if(count <= 0) { clearInterval(timer); document.getElementById('msg').innerHTML = "<a href='#'>حمل الآن</a>"; }
}, 1000);
</script>منع سحب أو حفظ الصور
سكريبت يحمي صورك من السرقة عبر منع النقر الأيمن عليها أو سحبها لسطح المكتب.
<script>
document.querySelectorAll('img').forEach(img => {
img.oncontextmenu = () => false;
img.onmousedown = (e) => e.preventDefault();
});
</script>زر طباعة محتوى المقال
يسمح للزائر بتحويل المقال إلى ملف PDF أو طباعته مباشرة بتنسيق نظيف.
<button onclick="window.print()">طباعة المقال</button>مشاركة النص المظلل
عندما يظلل الزائر نصاً، يظهر له خيار سريع لمشاركة هذا الجزء تحديداً على تويتر.
<script>
document.onmouseup = () => {
let sel = window.getSelection().toString();
if(sel) console.log("تغريد: " + sel); // هنا يمكنك ربط نافذة تويتر
};
</script>نافذة تأكيد العمر (18+)
نافذة منبثقة تظهر عند الدخول للموقع لتأكيد عمر الزائر قبل تصفح المحتوى الحساس.
<script>
if(!confirm("هل عمرك أكثر من 18 عاماً؟")) window.location.href="https://google.com";
</script>زر "خذني لمقال عشوائي"
يزيد من عدد مشاهدات الصفحات عبر توجيه الزائر لمقال عشوائي من أرشيف مدونتك.
<button onclick="location.href='/search?q=random'">مقال عشوائي</button>
<!-- ملاحظة: يتطلب هذا الكود تعديل الرابط حسب بنية أرشفة قالبك -->فهرس المحتويات التلقائي
يولد قائمة منبثقة من العناوين (H2, H3) داخل المقال، مما يحسن تجربة المستخدم وأرشفة جوجل.
<script>document.addEventListener("DOMContentLoaded",function(){const h=document.querySelectorAll(".post-body h2,.post-body h3");if(h.length>0){let t="<ul id='toc'>";h.forEach((x,i)=>{x.id="h-"+i;t+=`<li><a href="#h-${i}">${x.innerText}</a></li>`;});t+="</ul>";document.querySelector(".post-body").prepend(document.createRange().createContextualFragment(t));}});</script>مؤشر وقت القراءة المتوقع
يعرض للزائر الوقت التقريبي اللازم لإنهاء المقال بناءً على عدد الكلمات، مما يزيد من معدل البقاء.
<script>const text=document.querySelector(".post-body").innerText;const min=Math.ceil(text.split(" ").length/200);document.getElementById("read-time").innerText=min+" min read";</script>حماية الصور من السرقة
سكريبت يحمي صور مدونتك من السرقة عبر منع النقر الأيمن ومنع سحب الصور لسطح المكتب.
<script>document.querySelectorAll('img').forEach(img=>{img.oncontextmenu=()=>false;img.onmousedown=(e)=>e.preventDefault();});</script>تسريع الصور (Lazy Load)
تفعيل خاصية Lazy Loading لجميع الصور آلياً لزيادة سرعة فتح الصفحة وتحسين السيو.
<script>document.querySelectorAll('img').forEach(i=>i.setAttribute('loading','lazy'));</script>روابط خارجية Nofollow آلياً
سكريبت يضيف وسم rel="nofollow" لجميع الروابط الخارجية تلقائياً للحفاظ على قوة السيو.
<script>document.querySelectorAll('a').forEach(l=>{if(l.hostname!==window.location.hostname)l.setAttribute('rel','nofollow noopener');});</script>زر العودة للأعلى السلس
زر يظهر عند التمرير للأسفل يسمح للزائر بالعودة إلى أعلى الصفحة بحركة انسيابية مريحة.
<button onclick="window.scrollTo({top:0,behavior:'smooth'})">Top</button><style>html{scroll-behavior:smooth;}</style>حماية النصوص عند النسخ
عند قيام الزائر بنسخ نص، يتم إلحاق رابط المقال الأصلي آلياً مع النص المنسوخ لحماية الحقوق.
<script>document.addEventListener('copy',(e)=>{const s=window.getSelection();e.clipboardData.setData('text/plain',s+'\n\nالمصدر: '+window.location.href);e.preventDefault();});</script>شريط تقدم القراءة (Top Bar)
شريط نحيف يظهر في أعلى المتصفح يوضح للزائر مدى تقدمه في قراءة المحتوى الحالي.
<div id="pg" style="position:fixed;top:0;right:0;height:4px;background:#007bff;width:0%;z-index:9999;"></div><script>window.onscroll=()=>{let s=(document.documentElement.scrollTop/(document.documentElement.scrollHeight-document.documentElement.clientHeight))*100;document.getElementById("pg").style.width=s+"%";};</script>تحديث سنة الحقوق آلياً
سكريبت بسيط يقوم بتغيير سنة حقوق النشر في فوتر المدونة آلياً مع كل بداية عام جديد.
<span id="y"></span><script>document.getElementById('y').innerText=new Date().getFullYear();</script>فتح الروابط الخارجية بتبويب جديد
يضمن بقاء الزائر في مدونتك عبر فتح أي رابط خارجي في نافذة جديدة تلقائياً.
<script>document.querySelectorAll('a').forEach(l=>{if(l.hostname!==window.location.hostname)l.target='_blank';});</script>زر المشاركة الذكي (للجوال)
يفتح قائمة المشاركة الأصلية في هاتفك (واتساب، تيليجرام، إلخ) لمشاركة الرابط بضغطة واحدة.
<button onclick="if(navigator.share){navigator.share({title:document.title,url:window.location.href})}">مشاركة المقال</button>تلقائي Nofollow للروابط الخارجية
يضيف وسم rel="nofollow" تلقائياً لأي رابط يشير لموقع خارج مدونتك لحماية "قوة السيو".
<script>document.querySelectorAll('a').forEach(l=>{if(l.hostname!==window.location.hostname)l.setAttribute('rel','nofollow noopener')});</script>شريط قبول ملفات الارتباط (Cookies)
شريط بسيط يظهر في أسفل المدونة لإبلاغ الزوار باستخدام ملفات الارتباط، وهو ضروري لـ AdSense.
<div id="ck" style="position:fixed;bottom:0;width:100%;background:#333;color:#fff;padding:10px;text-align:center;z-index:9999">نحن نستخدم ملفات الارتباط. <button onclick="document.getElementById('ck').style.display='none'">موافق</button></div>تجاوب فيديوهات YouTube آلياً
سكريبت يضمن ظهور فيديوهات يوتيوب بشكل صحيح على جميع الشاشات دون خروجها عن إطار المقال.
<style>.vid-res{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .vid-res iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style>حماية محتوى المقال من النسخ
يمنع الزوار من تحديد النص أو نسخه داخل منطقة المقال فقط، مع ترك باقي المدونة حرة.
<script>const post=document.querySelector('.post-body');post.onselectstart=()=>false;post.oncontextmenu=()=>false;</script>تحويل صفحات الخطأ (404) تلقائياً
يقلل من معدل الارتداد عبر تحويل أي زائر يدخل لصفحة معطلة إلى الصفحة الرئيسية لمدونتك.
<script>if(document.title.includes('404')||document.title.includes('Page Not Found'))location.href='/';</script>مؤشر التقدم الدائري (Scroll)
تغيير شكل مؤشر التقدم التقليدي إلى دائرة تفاعلية تظهر في زاوية الصفحة توضح مسافة القراءة.
<div id="circle" style="position:fixed;bottom:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px">0%</div>إضافة زر نسخ لكل الأكواد آلياً
يضيف زر "نسخ" بشكل تلقائي لكل صندوق كود (PRE) تضعه في مقالاتك دون أي تدخل يدوي منك.
<script>document.querySelectorAll('pre').forEach(p=>{let b=document.createElement('button');b.innerText='Copy';b.onclick=()=>navigator.clipboard.writeText(p.innerText);p.append(b)});</script>تغيير لون تظليل النص
تخصيص اللون الذي يظهر عند قيام الزائر بتحديد أو تظليل أي نص داخل مدونتك ليتناسب مع هويتك.
<style>::selection{background:#007bff;color:#fff;} ::-moz-selection{background:#007bff;color:#fff;}</style>تشفير الإيميل (منع السبام)
يمنع البوتات من سحب بريدك الإلكتروني من الموقع عبر تشفيره برمجياً وإظهاره للمستخدم الحقيقي فقط.
<script>const u="info",d="domain.com";document.write(`<a href="mailto:${u}@${d}">${u}@${d}</a>`);</script>فتح الروابط الخارجية في نافذة جديدة
يضمن بقاء الزائر في مدونتك عبر إجبار المتصفح على فتح أي رابط خارجي في تبويب جديد تلقائياً.
<script>document.querySelectorAll('a').forEach(l=>{if(l.hostname!==window.location.hostname)l.target='_blank'});</script>تمييز الروابط الخارجية بأيقونة
يضيف أيقونة سهم (🔗) بجانب أي رابط يشير لموقع خارجي، مما يحسن من شفافية الموقع وتجربة المستخدم.
<style>a[href^="http"]:not([href*="yourdomain.com"])::after{content:" 🔗";font-size:10px;vertical-align:top;}</style>أداة "قراءة المقال" صوتياً
يضيف زر يتيح للزوار الاستماع لنص المقال بدلاً من قراءته، وهو مفيد جداً لتحسين إمكانية الوصول.
<button onclick="speechSynthesis.speak(new SpeechSynthesisUtterance(document.querySelector('.post-body').innerText))">استمع للمقال</button>منع سحب الصور لسطح المكتب
يمنع الزوار من "سحب وإفلات" الصور خارج المدونة، مما يعقد عملية سرقة المحتوى البصري.
<script>document.querySelectorAll('img').forEach(i=>i.onmousedown=(e)=>e.preventDefault());</script>تخصيص شكل شريط التمرير
تغيير شكل ولون شريط التمرير (Scrollbar) في المتصفح ليتناسب مع ألوان وتصميم مدونتك الخاصة.
<style>::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#007bff;border-radius:10px}</style>إلحاق رابط الموقع بالنص المنسوخ
عندما يقوم شخص بنسخ نص من موقعك، يتم تلقائياً إضافة "اقرأ المزيد في: [رابط المقال]" في نهاية النص.
<script>document.oncopy=e=>{e.clipboardData.setData('text',window.getSelection()+'\n\nالمصدر: '+location.href);e.preventDefault()};</script>تأثير التكبير عند تمرير الماوس
يضيف حركة "زوم" ناعمة على الصور عند مرور الماوس فوقها، مما يعطي طابعاً عصرياً للمدونة.
<style>.post-body img{transition:0.5s}.post-body img:hover{transform:scale(1.05);cursor:zoom-in}</style>عرض تاريخ آخر تحديث للمقال
يخبر محركات البحث والزوار أن المحتوى محدث، مما يزيد من ثقة جوجل في صفحاتك (للمدونات التقنية).
<meta property="article:modified_time" content="data:post.lastUpdatedISO8601"/>إضافة زر "طباعة المقال"
يسمح للزوار بطباعة محتوى المقال فقط أو حفظه كملف PDF بتنسيق نظيف خالي من الإعلانات والقوائم.
<button onclick="window.print()">طباعة بصيغة PDF</button>تشفير روابط التحميل (Base64)
يخفي رابط التحميل المباشر عن "بوتات" الفحص عبر تشفيره وإظهاره فقط عند نقر المستخدم الفعلي.
<button onclick="location.href=atob('aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbQ==')">تحميل الآن</button>العنوان الديناميكي للتبويب
يغير عنوان المتصفح عندما يفتح الزائر تبويباً آخر (مثلاً: "عد إلينا!") لجذب انتباهه للعودة لمدونتك.
<script>
var originalTitle = document.title;
window.onblur = () => document.title = "عد إلينا! ننتظرك 💔";
window.onfocus = () => document.title = originalTitle;
</script>معالج الصور المعطلة
سكريبت ذكي يكتشف أي صورة لا تعمل في مدونتك ويستبدلها تلقائياً بصورة "Placeholder" بدلاً من الفراغ.
<script>
document.querySelectorAll('img').forEach(img => {
img.onerror = () => img.src = "https://via.placeholder.com/300x200?text=Image+Not+Found";
});
</script>مخطط الأسئلة الشائعة (FAQ Schema)
كود JSON-LD يوضع في المقال لإظهار الأسئلة والأجوبة مباشرة في نتائج بحث جوجل (زيادة نسبة النقر).
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "السؤال هنا؟",
"acceptedAnswer": { "@type": "Answer", "text": "الإجابة هنا." }
}]
}
</script>زر الانتقال لنهاية المقال
زر بسيط يسمح للزائر بالقفز مباشرة إلى قسم التعليقات أو نهاية المقال بضغطة واحدة.
<button onclick="window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})">الذهاب للأسفل ↓</button>تثبيت القائمة الجانبية (Sidebar)
يجعل القائمة الجانبية تتحرك مع الزائر أثناء التمرير، مما يضمن ظهور الإعلانات أو الروابط الهامة دائماً.
<style>
.sidebar { position: sticky; top: 20px; }
</style>عداد التحميل التنازلي
سكريبت يجبر الزائر على الانتظار (مثلاً 10 ثوانٍ) قبل ظهور رابط التحميل، لزيادة وقت البقاء في الموقع.
<div id="timer">انتظر 10 ثوانٍ...</div>
<script>
let sec = 10;
let countdown = setInterval(() => {
sec--;
document.getElementById('timer').innerText = "انتظر " + sec + " ثانية";
if (sec <= 0) { clearInterval(countdown); document.getElementById('timer').innerHTML = "<a href='#'>حمل الآن</a>"; }
}, 1000);
</script>حماية الأكواد البرمجية من النسخ
إذا كنت تريد حماية شروحاتك البرمجية؛ هذا الكود يمنع نسخ أي نص داخل وسوم <code> و <pre>.
<style>
pre, code { user-select: none; -webkit-user-select: none; }
</style>مبدل كلاس الثيم (Theme Toggler)
سكريبت يضيف كلاس "dark-mode" لوسم الـ body بضغطة زر، مما يسهل عليك بناء وضع ليلي متكامل.
<script>
function toggleDark() { document.body.classList.toggle('dark-mode'); }
</script>تحسين أرشفة الصور آلياً
سكريبت يضيف وسم alt لجميع الصور التي نسيت إضافة وصف لها، معتمداً على عنوان المقال.
<script>
document.querySelectorAll('img').forEach(img => {
if(!img.alt) img.alt = document.title;
});
</script>رسالة تنبيه عند الخروج
يظهر رسالة تنبيه للزائر عندما يحاول تحريك الماوس لإغلاق الصفحة، لمحاولة إبقائه لفترة أطول.
<script>
document.addEventListener('mouseleave', () => {
alert("هل أنت متأكد من المغادرة؟ لدينا المزيد من الأكواد لك!");
}, {once: true});
</script>قائمة تنقل متجاوبة وبسيطة
تصميم قائمة علوية احترافية تتحول إلى قائمة منسدلة (Hamburger Menu) تلقائياً عند فتح المدونة من الجوال.
<style>
.nav { display: flex; justify-content: space-between; padding: 10px; background: #fff; }
@media (max-width: 600px) { .nav { flex-direction: column; display: none; } }
</style>محول الكلمات المفتاحية لروابط
سكريبت ذكي يبحث عن كلمات محددة في مقالك ويحولها تلقائياً إلى روابط داخلية لتقوية "السيو الداخلي" (Internal Linking).
<script>
const body = document.querySelector('.post-body');
body.innerHTML = body.innerHTML.replace(/بلوجر/g, '<a href="/search/label/Blogger">بلوجر</a>');
</script>نافذة ترحيبية تظهر لمرة واحدة
تظهر نافذة (Popup) للزائر الجديد ترحب به أو تدعوه للاشتراك، وتختفي باستخدام Cookie لضمان عدم إزعاجه مجدداً.
<script>
if(!localStorage.getItem('welcomed')){ alert('مرحباً بك في مكتبتنا!'); localStorage.setItem('welcomed', true); }
</script>تنبيه انقطاع الاتصال بالإنترنت
يظهر رسالة تنبيه ناعمة للزائر في حال انقطع اتصاله بالإنترنت أثناء تصفح مدونتك، ويختفي عند عودة الاتصال.
<script>
window.onoffline = () => alert('عذراً، يبدو أنك فقدت الاتصال بالإنترنت!');
window.ononline = () => alert('تمت استعادة الاتصال بنجاح.');
</script>زر نسخ النصوص السريع (Inline)
يسمح للزوار بنسخ كلمة معينة أو جملة (مثل كود خصم أو أمر برمجي) بضغطة زر واحدة بجانب النص.
<span id="code">TEXT123</span> <button onclick="navigator.clipboard.writeText(document.getElementById('code').innerText)">نسخ</button>شاشة تحميل الموقع (Loader)
يظهر أيقونة تحميل (Spinner) ناعمة حتى ينتهي المتصفح من تحميل كافة عناصر الصفحة بالكامل.
<div id="loader" style="position:fixed; inset:0; background:#fff; z-index:9999;">جاري التحميل...</div>
<script>window.onload = () => document.getElementById('loader').style.display='none';</script>منع فتح سورس الموقع (Inspect)
يعطل اختصارات لوحة المفاتيح الشهيرة (F12, Ctrl+U, Ctrl+Shift+I) لمنع المستخدمين العاديين من فحص الكود.
<script>
document.onkeydown = (e) => { if(e.keyCode == 123 || (e.ctrlKey && e.shiftKey && e.keyCode == 73)) return false; };
</script>أداة حساب عدد الكلمات
أداة بسيطة تضعها في صفحة مستقلة لتمكين الزوار من كتابة نص وحساب عدد الكلمات والحروف فوراً.
<textarea oninput="document.getElementById('res').innerText=this.value.length"></textarea>
<p>عدد الحروف: <span id="res">0</span></p>تنسيق المقال للطباعة الاحترافية
كود CSS يقوم بإخفاء القوائم الجانبية والإعلانات تلقائياً عند قيام الزائر بطباعة المقال ليظهر النص فقط.
<style>
@media print { .sidebar, .ads, .footer { display: none; } .post-body { width: 100%; } }
</style>تحية الزائر حسب وقت اليوم
يظهر رسالة ترحيبية متغيرة (صباح الخير / مساء الخير) بناءً على التوقيت المحلي لجهاز الزائر.
<script>
const hour = new Date().getHours();
const msg = hour < 12 ? "صباح الخير" : "مساء الخير";
alert(msg + " بك في مدونتنا!");
</script>عرض تاريخ آخر تحديث
يخبر محركات البحث أن محتواك متجدد باستمرار عبر إظهار تاريخ التعديل بدلاً من تاريخ النشر الأصلي.
<i>آخر تحديث: <data:post.lastUpdated/></i>زر اتصال عائم مزدوج
زر أنيق يظهر في زاوية الشاشة يتيح للزوار اختيار وسيلة التواصل المفضلة (واتساب أو تيليجرام).
<div style="position:fixed;bottom:20px;left:20px;display:grid;gap:10px;">
<a href="https://wa.me/123">WA</a>
<a href="https://t.me/user">TG</a>
</div>بطاقات مشاركة التواصل الاجتماعي
أكواد الميتا (Open Graph) لضمان ظهور صورة وعنوان المقال بشكل احترافي عند مشاركته على فيسبوك وتويتر.
<meta property="og:title" content="عنوان المقال"/>
<meta property="og:image" content="رابط الصورة"/>عرض معلومات جهاز الزائر
أداة تقنية تظهر للزائر نوع متصفحه ونظام تشغيله الحالي، مفيدة جداً لصفحات "تحميل البرامج".
<script>
document.write("متصفحك: " + navigator.userAgentData.brands[0].brand);
</script>حماية الأكواد من النسخ اليدوي
يمنع الزوار من تحديد أو تظليل النص داخل صناديق الأكواد فقط، مع الحفاظ على إمكانية القراءة.
<style>pre, code { user-select: none; -ms-user-select: none; }</style>إعادة توجيه ذكية (Redirect)
يقوم بنقل الزائر تلقائياً لصفحة أخرى بعد مرور عدد معين من الثواني (يستخدم في صفحات جاري التحميل).
<script>
setTimeout(() => { window.location.href = "https://example.com"; }, 5000);
</script>مصلح وسوم الصور التلقائي
سكريبت يفحص جميع الصور، وإذا وجد صورة بدون وصف (Alt)، يضع لها عنوان المقال تلقائياً لتحسين الأرشفة.
<script>
document.querySelectorAll('img').forEach(i => { if(!i.alt) i.alt = document.title; });
</script>تنبيه عند طباعة الصفحة
تظهر رسالة منبثقة أو تنبيه للزائر عندما يضغط على (Ctrl+P) لطباعة محتوى مدونتك.
<script>
window.onbeforeprint = () => alert("شكراً لطباعة محتوانا، نرجو ذكر المصدر!");
</script>تأثير ظهور النصوص (Fade-In)
يجعل محتوى المقال يظهر بشكل ناعم وتدريجي عند فتح الصفحة، مما يعطي إحساساً بالفخامة.
<style>
body { animation: fadeIn 1.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>كشف التصفح الخفي للزائر
أداة متقدمة تكتشف إذا كان الزائر يستخدم "الوضع الخفي" (Incognito Mode) وتظهر له رسالة مخصصة.
<script>
if (navigator.storage && navigator.storage.estimate) {
navigator.storage.estimate().then(e => { if(e.quota < 120000000) alert("أنت في الوضع الخفي!"); });
}
</script>عداد الكلمات والحروف المباشر
أداة بسيطة تضعها في صفحة مستقلة لتمكين زوارك من كتابة نص وحساب عدد الكلمات والحروف فوراً أثناء الكتابة.
<textarea oninput="document.getElementById('charCount').innerText = this.value.length"></textarea>
<p>عدد الحروف: <span id="charCount">0</span></p>تعطيل النقر الأيمن على الصور فقط
يحمي صور مدونتك عبر منع ظهور القائمة المنبثقة عند النقر الأيمن عليها، مع السماح بالنقر العادي في باقي الموقع.
<script>
document.querySelectorAll('img').forEach(img => {
img.addEventListener('contextmenu', e => e.preventDefault());
});
</script>تصميم الأسئلة الشائعة (Accordion)
تصميم منسدل (أكورديون) لعرض الأسئلة والأجوبة، يساعد في تحسين السيو عبر توفير محتوى منظم لمحركات البحث.
<details>
<summary>السؤال الأول هنا؟</summary>
<p>الإجابة التفصيلية تظهر هنا.</p>
</details>تغيير العنوان عند مغادرة التبويب
يجذب انتباه الزائر للعودة لموقعك عبر تغيير نص عنوان الصفحة (Tab Title) عندما ينتقل لتبويب آخر في المتصفح.
<script>
let oldTitle = document.title;
window.onblur = () => document.title = "عد إلينا! ننتظرك 💔";
window.onfocus = () => document.title = oldTitle;
</script>كاشف Adblock مع تعتيم الشاشة
سكريبت متقدم يقوم بتعتيم محتوى الصفحة وإظهار رسالة تنبيه إذا اكتشف أن الزائر يستخدم إضافة لمنع الإعلانات.
<script>
window.onload = function() {
if(!document.querySelector('.adsbygoogle')) {
alert("برجاء تعطيل مانع الإعلانات لدعمنا!");
}
};
</script>إضافة نص Alt للصور آلياً
يقوم هذا السكريبت بفحص جميع الصور في المقال وإضافة وصف (Alt Text) مستمد من عنوان الصفحة للصور التي تفتقده.
<script>
document.querySelectorAll('img').forEach(img => {
if(!img.alt) img.alt = document.title;
});
</script>تنسيق شريط التمرير مخصص
تغيير شكل شريط التمرير التقليدي في المتصفح إلى شكل عصري وأنيق يتناسب مع ألوان وتصميم مدونتك.
<style>
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #007bff; border-radius: 10px; }
</style>مؤشر التقدم الدائري (Scroll)
بدلاً من الشريط التقليدي، يظهر هذا الكود دائرة تفاعلية في الزاوية توضح للزائر النسبة المئوية لما قرأه من المقال.
<div id="scrollCircle" style="position:fixed;bottom:20px;right:20px;">0%</div>زر نسخ رابط المقال الحالي
زر يضعه الزائر لنسخ رابط المقال فوراً إلى الحافظة (Clipboard) لمشاركته بسهولة مع أصدقائه.
<button onclick="navigator.clipboard.writeText(window.location.href)">نسخ الرابط</button>عرض معلومات جهاز الزائر
أداة تقنية تظهر للزائر نوع متصفحه ونظام تشغيله الحالي، مفيدة جداً للمدونات التي تقدم شروحات تقنية.
<script>
document.write("نظامك: " + navigator.platform);
</script>