أفضل أكواد مفيدة لمدونة بلوجر: حزمة أدوات تجعل موقعك أكثر احترافية

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

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

أين أضع هذه الأكواد في بلوجر؟

أغلب الأكواد في هذا المقال توضع من خلال:

ثم تلصق الكود وتحفظ الأداة. يفضل وضع الأداة في أسفل الصفحة أو الشريط الجانبي، لأن الكود سيعمل في الموقع كاملًا.

1. كود فهرس تلقائي للمقالات

هذا الكود ينشئ فهرسًا تلقائيًا داخل المقالات الطويلة، ويعتمد على عناوين H2 و H3. مفيد جدًا للمقالات الطويلة والشروحات.

<style>
#nashmii-toc{
  background:#f4f8fb;
  border:1px solid #d9e6f2;
  border-right:4px solid #1d72b8;
  padding:14px 16px;
  margin:22px 0;
  border-radius:8px;
  font-family:Arial,Tahoma,sans-serif;
  direction:rtl;
}
#nashmii-toc strong{display:block;margin-bottom:8px;color:#12355b;font-size:17px}
#nashmii-toc a{display:block;color:#1d72b8;text-decoration:none;margin:7px 0;line-height:1.7}
#nashmii-toc a:hover{text-decoration:underline}
#nashmii-toc .h3{padding-right:18px;font-size:14px;color:#245d8f}
</style>

<script>
(function(){
  if(!/\/\d{4}\/\d{2}\/.*\.html/.test(location.pathname)) return;
  var content = document.querySelector('.post-body, article, .entry-content, .post');
  if(!content) return;

  var heads = Array.from(content.querySelectorAll('h2,h3')).filter(function(h){
    return h.textContent.trim().length > 3;
  });

  if(heads.length < 3) return;
  if(document.getElementById('nashmii-toc')) return;

  var box = document.createElement('div');
  box.id = 'nashmii-toc';
  box.innerHTML = '<strong>محتوى المقال</strong>';

  heads.forEach(function(h,i){
    if(!h.id) h.id = 'nashmii-heading-' + i;
    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.textContent = h.textContent.trim();
    a.className = h.tagName.toLowerCase();
    box.appendChild(a);
  });

  content.insertBefore(box, heads[0]);
})();
</script>

2. كود شريط تقدم القراءة

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

<style>
#nashmii-progress{
  position:fixed;
  top:0;
  right:0;
  height:4px;
  width:0;
  background:#00a884;
  z-index:99999;
}
</style>

<div id="nashmii-progress"></div>

<script>
(function(){
  var bar = document.getElementById('nashmii-progress');
  window.addEventListener('scroll', function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var progress = height > 0 ? (scrollTop / height) * 100 : 0;
    bar.style.width = progress + '%';
  });
})();
</script>

3. كود زر الرجوع للأعلى

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

<style>
#nashmii-top{
  position:fixed;
  bottom:20px;
  left:18px;
  z-index:9999;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#12355b;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:none;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
</style>

<button id="nashmii-top" aria-label="الرجوع للأعلى">↑</button>

<script>
(function(){
  var btn = document.getElementById('nashmii-top');
  window.addEventListener('scroll', function(){
    btn.style.display = window.scrollY > 500 ? 'block' : 'none';
  });
  btn.onclick = function(){
    window.scrollTo({top:0, behavior:'smooth'});
  };
})();
</script>

4. كود مدة قراءة المقال

يظهر للزائر مدة القراءة التقريبية، وهذا مفيد للمقالات الطويلة لأنه يعطي القارئ فكرة عن وقت القراءة.

<style>
#nashmii-reading-time{
  background:#f4f8fb;
  border-right:4px solid #1d72b8;
  padding:10px 14px;
  margin:16px 0;
  border-radius:6px;
  color:#12355b;
  font-family:Arial,Tahoma,sans-serif;
  font-weight:bold;
}
</style>

<script>
(function(){
  if(!/\/\d{4}\/\d{2}\/.*\.html/.test(location.pathname)) return;
  var post = document.querySelector('.post-body, article, .entry-content');
  if(!post) return;

  var words = post.innerText.trim().split(/\s+/).length;
  var minutes = Math.max(1, Math.ceil(words / 220));

  var box = document.createElement('div');
  box.id = 'nashmii-reading-time';
  box.textContent = 'مدة القراءة التقريبية: ' + minutes + ' دقائق';

  var firstP = post.querySelector('p');
  if(firstP){
    firstP.parentNode.insertBefore(box, firstP);
  }
})();
</script>

5. كود مشاركة المقال على واتساب

زر مشاركة واتساب يساعد الزوار على إرسال المقال لأصدقائهم، وهذا قد يزيد الزيارات بشكل طبيعي.

<style>
#nashmii-whatsapp-share{
  display:inline-block;
  background:#25D366;
  color:#fff!important;
  padding:10px 15px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  font-family:Arial,Tahoma,sans-serif;
  margin:18px 0;
}
</style>

<script>
(function(){
  if(!/\/\d{4}\/\d{2}\/.*\.html/.test(location.pathname)) return;
  var post = document.querySelector('.post-body, article, .entry-content');
  if(!post) return;

  var a = document.createElement('a');
  a.id = 'nashmii-whatsapp-share';
  a.href = 'https://wa.me/?text=' + encodeURIComponent(document.title + ' ' + location.href);
  a.target = '_blank';
  a.rel = 'nofollow noopener';
  a.textContent = 'مشاركة المقال على واتساب';

  post.appendChild(a);
})();
</script>

6. كود تحسين الصور داخل المقال

هذا الكود يضيف تحميلًا كسولًا للصور داخل المقال، ما يساعد على تحسين سرعة الصفحة. يترك أول صورة كما هي حتى لا يؤثر على الصورة الرئيسية.

<script>
(function(){
  var post = document.querySelector('.post-body, article, .entry-content');
  if(!post) return;

  var imgs = Array.from(post.querySelectorAll('img'));
  imgs.forEach(function(img, index){
    if(index > 0){
      img.setAttribute('loading', 'lazy');
      img.setAttribute('decoding', 'async');
    }
    img.style.maxWidth = '100%';
    img.style.height = 'auto';
  });
})();
</script>

7. كود تحسين الروابط الخارجية

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

<script>
(function(){
  var links = document.querySelectorAll('a[href^="http"]');
  links.forEach(function(a){
    if(!a.href.includes(location.hostname)){
      a.target = '_blank';
      var rel = a.getAttribute('rel') || '';
      if(!rel.includes('noopener')) rel += ' noopener';
      a.setAttribute('rel', rel.trim());
    }
  });
})();
</script>

8. كود نسخ الأكواد داخل المقال

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

<style>
.copy-code-btn{
  display:inline-block;
  background:#12355b;
  color:#fff;
  border:0;
  border-radius:6px;
  padding:7px 12px;
  margin:10px 0;
  cursor:pointer;
  font-family:Arial,Tahoma,sans-serif;
}
</style>

<script>
(function(){
  var blocks = document.querySelectorAll('pre code');
  blocks.forEach(function(code){
    var btn = document.createElement('button');
    btn.className = 'copy-code-btn';
    btn.textContent = 'نسخ الكود';

    btn.onclick = function(){
      navigator.clipboard.writeText(code.innerText).then(function(){
        btn.textContent = 'تم النسخ';
        setTimeout(function(){ btn.textContent = 'نسخ الكود'; }, 1600);
      });
    };

    code.parentNode.parentNode.insertBefore(btn, code.parentNode);
  });
})();
</script>

أي الأكواد أبدأ بها؟

إذا كانت مدونتك جديدة، أنصحك بهذا الترتيب:

1. فهرس المقال التلقائي.
2. زر الرجوع للأعلى.
3. مدة قراءة المقال.
4. مشاركة واتساب.
5. تحسين الصور.

أسئلة شائعة

هل هذه الأكواد آمنة لبلوجر؟

نعم، الأكواد بسيطة ولا تعتمد على مكتبات خارجية. لكن يفضل تجربة كل كود بعد إضافته.

هل أضع الأكواد داخل كل مقال؟

لا، معظم الأكواد توضع مرة واحدة في أداة HTML/JavaScript من التنسيق.

هل كثرة الأكواد تبطئ المدونة؟

نعم، إذا كانت كثيرة أو غير ضرورية. استخدم فقط الأكواد التي تضيف فائدة حقيقية للزائر.