📁 آخر الأخبار
0

أفضل 7 سكربتات وإضافات Blogger جاهزة للنسخ واللصق (طور مدونتك بنفسك)

Diyou DZ Diyou DZ

 تتميز منصة بلوجر (Blogger) بمرونتها العالية التي تتيح لأصحاب المواقع والمدونين إمكانية التعديل الكامل على مظهر وميزات مدوناتهم دون الحاجة للاعتماد على مبرمج محترف. فمن خلال دمج بعض الأكواد البرمجية الخفيفة والنظيفة المصممة بتقنيات HTML5 و CSS3 والجافا سكربت، يمكنك تحويل مدونتك البسيطة إلى موقع تفاعلي فخم ينافس كبرى المواقع العالمية في تجربة المستخدم (UX) وسرعة الأداء، وهو ما تعشقه عناكب السيو (SEO) في تصنيف المواقع.

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

كود شريط تقدم القراءة الذكي (Reading Progress Bar Script)

إضافة مذهلة تظهر في أعلى الصفحة كشريط ملون يتحرك برمجياً مع نزول الزائر لأسفل المقال، ليوضح له النسبة المئوية المتبقية لقراءة التدوينة، مما يحفزه على البقاء فترة أطول.

طريقة التركيب: ضع كود الـ CSS في المظهر فوق </style>، وكود الجافا سكربت فوق </body>.

شريط تقدم
HTML 
<style>
#reading-progress {
  position: fixed; top: 0; left: 0; width: 0%; height: 4px;
  background: #ff4757; z-index: 9999; transition: width 0.1s ease;
}
</style>
<div id='reading-progress'></div>

<script>
window.onscroll = function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("reading-progress").style.width = scrolled + "%";
};
</script>

كود أزرار التحميل والمعاينة الاحترافية بتأثير الحوام (CSS Flex Buttons)

أكواد جاهزة كلياً لإنشاء أزرار تحميل (Download) ومعاينة حية (Demo) أنيقة جداً ومتجاوبة مع شاشات الهواتف، تتغير ألوانها بانسيابية عند مرور مؤشر الماوس فوقها.

طريقة التركيب: انسخ الكود وضعه مباشرة داخل وضع (HTML) في المقال عند الحاجة.

تحميل الآن معاينة حية
أزرار التحميل والمعاينة
HTML 
<style>
.btn-container { display: flex; gap: 15px; justify-content: center; margin: 20px 0; }
.diyou-btn {
  padding: 12px 25px; font-size: 16px; font-weight: bold; border-radius: 5px;
  text-decoration: none; transition: all 0.3s ease; text-align: center; display: inline-block;
}
.btn-download { background-color: #2ed573; color: white; }
.btn-download:hover { background-color: #26af5f; transform: translateY(-3px); }
.btn-demo { background-color: #1e90ff; color: white; }
.btn-demo:hover { background-color: #1c82e6; transform: translateY(-3px); }
</style>

<div class="btn-container">
  <a href="رابط_التحميل_هنا" class="diyou-btn btn-download" target="_blank">تحميل الآن</a>
  <a href="رابط_المعاينة_هنا" class="diyou-btn btn-demo" target="_blank">معاينة حية</a>
</div>

سكربت صندوق نسخ الأكواد البرمجية (Click to Copy Code Box)

إذا كنت تقدم أكواداً لزوارك، فإن هذا السكربت يمنحك صندوقاً منسقاً يحتوي على زر ذكي مكتوب عليه "نسخ الكود"؛ بمجرد أن يضغط عليه الزائر يتم نسخ النص تلقائياً وتتغير العبارة إلى "تم النسخ!".

طريقة التركيب: يُوضع في المقال داخل نافذة الـ HTML

// ضع الكود البرمجي الخاص بك هنا ليقوم الزائر بنسخه بنقرة واحدة
console.log("Welcome to diyou dz!");
صندوق نسخ الأكواد
HTML 
<style>
.code-box { background: #2f3542; color: #f1f2f6; padding: 15px; border-radius: 6px; position: relative; font-family: monospace; direction: ltr; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: #747d8c; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
</style>

<div class="code-box">
  <button class="copy-btn" onclick="copyCode(this)">نسخ الكود</button>
  <pre><code>// ضع الكود البرمجي الخاص بك هنا ليقوم الزائر بنسخه بنقرة واحدة
console.log("Welcome to diyou dz!");</code></pre>
</div>

<script>
function copyCode(button) {
  var codeText = button.nextElementSibling.innerText;
  navigator.clipboard.writeText(codeText).then(function() {
    button.innerText = "تم النسخ!";
    setTimeout(function() { button.innerText = "نسخ الكود"; }, 2000);
  });
}
</script>

ضافة صندوق التنبيهات والرسائل التحذيرية (Alert Boxes)

تُستخدم هذه الإضافة البرمجية الجاهزة لإبراز ملاحظة هامة، أو نص تحذيري، أو رسالة ترحيبية للزائر داخل المقال بشكل ملفت يضمن عدم تجاهله للمعلومة.

معلومة هامة: تأكد دائماً من أخذ نسخة احتياطية من قالبك قبل تعديل الأكواد.
تحذير تقني: لا تقم بتحميل السكربتات المقرصنة لحماية مدونتك من الحظر.

صندوق التنبيهات والرسائل التحذيرية
HTML 
<style>
.diyou-alert { padding: 15px; margin: 15px 0; border-right: 6px solid; border-radius: 4px; font-size: 15px; }
.alert-info { background-color: #e1f5fe; color: #0288d1; border-right-color: #0288d1; }
.alert-danger { background-color: #ffebee; color: #c62828; border-right-color: #c62828; }
</style>

<div class="diyou-alert alert-info"><strong>معلومة هامة:</strong> تأكد دائماً من أخذ نسخة احتياطية من قالبك قبل تعديل الأكواد.</div>
<div class="diyou-alert alert-danger"><strong>تحذير تقني:</strong> لا تقم بتحميل السكربتات المقرصنة لحماية مدونتك من الحظر.</div>

سكربت منع نسخ محتوى المدونة وحماية المقالات (Anti-Copy Script)

لحماية مجهودك ومقالاتك الحصرية في مدونة diyou dz من السرقة أو النسخ التلقائي من قِبل المدونات المنافسة، يمنع هذا السكربت تحديد النصوص وضغط زر الفأرة الأيمن داخل الموقع.

طريقة التركيب: يُوضع لمرة واحدة فوق وسم </body> في قالب مدونتك.

سكربت منع نسخ محتوى المدونة وحماية المقالات
HTML 
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
document.onselectstart = function() { return false; };
document.onkeydown = function(e) {
  if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 85 || e.keyCode === 73)) { return false; }
};
</script>

 سكربت زر الصعود السلس للأعلى (Smooth Scroll to Top Widget)

كود برميجي جاهز وخفيف جداً، يقوم بإظهار زر سهم صغير في أسفل شاشة تصفح الزائر عندما ينزل للأسفل، وعند النقر عليه يعود به إلى أعلى المدونة بانسيابية مريحة

سكربت زر الصعود السلس للأعلى
HTML 
<button onclick="scrollToTop()" id="goTopBtn" style="display:none; position:fixed; bottom:20px; left:20px; z-index:99; background:#ff4757; color:white; border:none; padding:10px 15px; border-radius:5px; cursor:pointer; font-size:18px;">↑</button>

<script>
var mybutton = document.getElementById("goTopBtn");
window.onscroll = function() { if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } };
function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); }
</script>

أداة توليد وتأجيل إعلانات أدسينس لتسريع القالب (AdSense Lazy Load)

كود برمجي ثوري يمنع إعلانات جوجل أدسينس من إبطاء مدونتك؛ حيث يقوم بتأجيل اتصال المدونة بسيرفرات الإعلانات لمدة ثانيتين فقط حتى يفتح المحتوى الأساسي للزائر أولاً، مما يمنح موقعك سرعة خارقة في اختبارات السيو.

طريقة الاستخدام: استبدل كود أدسينس الافتراضي بهذا السكربت الذكي (مع وضع معرّف الناشر الخاص بك ca-pub-xxxxx).

أداة توليد وتأجيل إعلانات أدسينس لتسريع القالب
HTML 
<script>
var lazyadsense = false;
window.addEventListener("scroll", function(){
  if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
    (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
    lazyadsense = true;
  }
}, true);
</script>
قناة يوتيوب
اشترك الآن
قناة تيليجرام
انضم الآن
تحليل المقال
..
متواجدون ...
👁️
مشاهدات ...
📝
كلمات 0
⏱️
قراءة 0 د
📅
نشر 20/05/2026
♻️
تحديث 20/05/2026
هل لديك استفسار؟ نحن هنا للمساعدة
تواصل معنا
Diyou DZ
Diyou DZ
سمير مدون جزائري صاحب قناة Diyou DZ على اليوتيوب تعرض كل مايخص البنوك والقروض والسكن في الجزائر و مدونة فيكا للمعلومات التقنية والتطبيقات والمواقع الربحية وكل مايساعدك في حياتك اليومية

مقالات قد تهمك

تعليقات