تركيب زر تصغير و تكبير الخط بداخل المواضيع لقالب بلوجر

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

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

وبجانب الفائدة الصحية، فإنها تعزّز الجانب الجمالي للموقع، إذ يشعر الزائر بأن القالب احترافي ويهتم بتجربته الشخصية. كما تساعد المدونين على تقليل الارتداد (Bounce Rate)، لأن القارئ سيبقى داخل التدوينة بدلاً من مغادرتها بحثاً عن محتوى أكثر وضوحاً.

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

و هذه الميزة قد تجدها في القوالب المدفوهة و انا من خلال هذا الموضوع اقدمها لكم بشكل جديد و مميز جدا 

و تركيبها يتم بداخل القالب بكل سهولة و ستظهر القالب اكثر احترافية و اقدمها لكم بشكلين

الشكل الاول امكانيو وضع زر التحكم في مكان تختاره انت بداخل المواضيع و الشكل الثاني تظهر زر التحكم بشكل عائم بداخل المواضيع 

شرح التركيب بالفيديو

معاينة الاضافة

شرح تركيب اضافة زر التكبير و التصغير

نذهب الى المظهر و ثم ننتقل الى تعديل HTML و ثم نبحث عن </head> و نلصق الكود التالي أعلاه

<style>

input#fontSlider {background: linear-gradient(135deg, #007bff, #00bcd4);height: 2px;} 

.fontControlWrapper{position:relative;width:100%;height:260px;margin:40px 0}

#fontControlBtn{position:absolute;left:58px;width:35px;height:36px;border-radius:50%;background:linear-gradient(135deg,#007bff,#00bcd4);border:none;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;font-size:25px;color:#fff}

#fontControlBox{position:absolute;left:50px;background:#fff;padding:12px;border-radius:14px;display:none;gap:8px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:10}

#fontSizeIndicator{position:absolute;top:110px;left:100px;background:#007bff;color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;z-index:10}

#fontSizeIndicator.show{opacity:1}

.icon-svg{width:22px;height:22px;fill:#007bff;cursor:pointer}

#fontSlider{width:120px}

#resetFontBtn{background: linear-gradient(135deg, #007bff, #00bcd4);border:none;color:#fff;border-radius:4px;cursor:pointer;padding:0 14px;font-size:18px}

</style>

ثم نبحث عن </body> و نلصق الكود التالي أعلاه

<script type='text/javascript'>

//<![CDATA[

document.addEventListener("DOMContentLoaded", function() {

  const article = document.querySelector(".post-body");

  if (!article) return;

  const btn = document.getElementById("fontControlBtn");

  const box = document.getElementById("fontControlBox");

  const slider = document.getElementById("fontSlider");

  const indicator = document.getElementById("fontSizeIndicator");

  const increaseFont = document.getElementById("increaseFont");

  const decreaseFont = document.getElementById("decreaseFont");

  const resetFontBtn = document.getElementById("resetFontBtn");

  const saved = localStorage.getItem("fontSize");

  if (saved) {

    article.style.fontSize = saved + "px";

    slider.value = saved;

  }

  btn.onclick = () => box.style.display = box.style.display == "flex" ? "none" : "flex";

  function show(v) {

    indicator.textContent = v + "px";

    indicator.classList.add("show");

    setTimeout(() => indicator.classList.remove("show"), 1500);

  }

  slider.oninput = () => {

    article.style.fontSize = slider.value + "px";

    localStorage.setItem("fontSize", slider.value);

    show(slider.value);

  };

  increaseFont.onclick = () => { if (+slider.value < 30) { slider.value++; slider.oninput() } };

  decreaseFont.onclick = () => { if (+slider.value > 12) { slider.value--; slider.oninput() } };

  resetFontBtn.onclick = () => { slider.value = 16; slider.oninput() };

  document.addEventListener("click", function(event) {

    if (!box.contains(event.target) && !btn.contains(event.target)) {

      box.style.display = "none";

    }

  });

});

//]]>

</script>

نقوم بالبحث عن مكان لوضع الزربداخله و نضيف الكود التالي بداخله

<button id="fontControlBtn" title="تغيير حجم الخط">

A

</button>

<div id="fontControlBox">

<svg id="decreaseFont" class="icon-svg" viewBox="0 0 24 24">

<path d="M19 13H5v-2h14v2z"/>

</svg>

<input id="fontSlider" type="range" min="12" max="30" value="16"/>

<svg id="increaseFont" class="icon-svg" viewBox="0 0 24 24">

<path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2z"/>

</svg>

<button id="resetFontBtn">↺</button>

</div>

<div id="fontSizeIndicator">16px</div>

أذا رغبت أختيار الزر بشكل عائم بداخل المواضيع كل ما عليك تغير اكواد CSS بهذا

 <style>

input#fontSlider{background:#2675fc;height:2px}

#fontControlBtn{position:fixed;bottom:70px;right:20px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#007bff,#00bcd4);border:none;cursor:pointer;z-index:9999;display:flex;align-items:center;font-size:25px;color:#ffffff;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}

#fontControlBtn svg{width:24px;height:24px;fill:#fff}

#fontControlBox{position:fixed;bottom:130px;right:20px;background:#fff;padding:12px;border-radius:14px;display:none;gap:8px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:9999}

#fontSlider{width:120px}

.icon-svg{width:22px;height:22px;fill:#007bff;cursor:pointer}

#resetFontBtn{background:#007bff;border:none;color:#fff;border-radius:4px;cursor:pointer;padding:0 14px;font-size:18px}

#fontSizeIndicator{position:fixed;bottom:196px;right:26px;background:#007bff;color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;z-index:9999}

#fontSizeIndicator.show{opacity:1}

</style>

ملاحظة مهمة 

أذا لم يعمل معك الزر يجب التاكد من الكلاس الخاص بالمواضيع الموجود بالقالب الخاص بك

الكلاس الحالي الموجود بالكود هو .post-body اذا لم يكن نفس الكلاس يجب تغيره ستجده باكواد الجافا سكربت باللون الأحمر

و ثم قم بالحفظ

وفي الختام !

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