كيفية إضافة صندوق الأكواد إلى مدونة بلوجر مع زر الوضع الليلي

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

شرح كيفية اضافة صندوق الاكواد فى مدونة بلوجر خطوة بخطوة

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

يتعذر عليك استخدام هذه الإضافة إذا كان القالب الخاص بك يحتوي على أي أكواد خاصة بصناديق الأكواد السابقة. لذا عليك حذفها قبل استخدام هذه الإضافة.

طريقة اضافة الكود الى مدونة بلوجر

يمكنك إضافة صندوق الأكواد مع زر الوضع الليلي إلى مدونتك في بلوجر باستخدام الخطوات التالية:

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html

2.قم بالبحث عن وسم /*]]>*/</style> او وسم ]]></b:skin> ثم اضف الكود التالى اعلى اعلاه.   

.CodeBox{-webkit-tap-highlight-color:transparent;background:#ecf3ff;position:relative;padding-top:30px;border-radius:5px;margin:40px 0}
.CodeBox pre{display:block;position:relative;font-family:tajawal;font-size:13px;line-height:1.6em;hyphens:none;overflow:auto;direction:rtl;white-space:pre;background:transparent;padding:0 15px 15px;margin:0}
.CodeBox pre::before, .CodeBox pre::after{display:none}
.CodeBoxT{position:absolute;left:0;top:0;padding:10px 0 0 10px}
.CodeBoxT button{position:relative;background:transparent;outline:none;border:none;cursor:pointer;padding:0;margin:0;width:20px;height:20px;display:inline-flex;justify-content:center;align-items:center}
.CodeBoxT button:not(:last-child){margin-left:10px}
.CodeBoxT button svg{width:20px;height:20px;fill:none!important;stroke:#000 !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.CodeBoxDrk .CodeBoxT button .moon, body:not(.CodeBoxDrk) .CodeBoxT button .sun, .CodeBox.copied button .copy, .CodeBox:not(.copied) button .check{display:none}
.CodeBoxT button span{display:block;position:absolute;bottom:calc(20px + 10px);left:-10px;background:#252526;color:#fff;white-space:nowrap;font-size:11px;line-height:1rem;padding:4px 6px;border-radius:3px;opacity:0;visibility:hidden;transition:all .2s ease}
.CodeBoxT button:hover span{opacity:1;visibility:visible;bottom:calc(20px + 20px)}
.CodeBoxT button span::before{content:'';position:absolute;bottom:-3px;left:15px;width:8px;height:8px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.CodeBoxDrk .CodeBox{background:#283142;color:#fffdfc}
.CodeBoxDrk .CodeBox pre{color:#eceff1}
.CodeBoxDrk .CodeBoxT button svg{stroke:#fff !important}

3. قم بالبحث عن وسم </body>  واضف الكود التالى اعلاه.

<script>
  /*<![CDATA[*/
  /* Codebox by House Of Blogger */
  (() => {
    /* config */
    var config = {
      copyText: 'نسخ إلى الحافظة',
      copiedText: 'تم النسخ إلى الحافظة',
      lightText: 'التبديل الى الوضع العادى',
      darkText: 'التبديل الى الوضع المظلم',
      copiedToast: 'تم النسخ إلى الحافظة!'
    }
    /* main scripts */
    var cBox = document.querySelectorAll(".CodeBox");
    var dBdy = document.getElementsByTagName('body')[0];
    localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('CodeBoxDrk') : dBdy.classList.remove('CodeBoxDrk');
    for (var i = 0; i < cBox.length; i++){
      let c = cBox[i];
      c.setAttribute('data-code', i);
      c.insertAdjacentHTML("afterbegin", "<div class='CodeBoxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");
    }
    window.codeDark = () => {
      localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");
      localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("CodeBoxDrk") : dBdy.classList.remove("CodeBoxDrk");
    }
    window.codeCopy = (index) => {
      if (index !== undefined) {
        let el = document.querySelector(".CodeBox[data-code='" + index + "']");
        if (el !== null){
          let pre = el.querySelector('pre');
          if (pre !== null){
            var e = getSelection(),
                t = document.createRange();
            e.removeAllRanges();
            t.selectNodeContents(pre);
            e.addRange(t);
            document.execCommand("copy");
            e.removeAllRanges();
            el.classList.add('copied');
            toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
            setTimeout(() => {
              el.classList.remove('copied');
            }, 2000)
          }
        }
      }
    }
  })()
  /*]]>*/
</script>

4. بعد تنفيذ هذه الخطوات يمكن الدخول الى المقال واضف هذا الكود لعرض الاكواد داخل المشاركات

<div class="CodeBox">
  <pre><code>
اكتب الكود هنا
</code></pre>
</div>

قبل اضافة صندوق الاكواد داخل المواضيع يجب عليك تحويل الكود من خلال محول الاكود 

تحميل الاكواد

رابط مباشر لتحميل الاكواد اضغط هنا

تعديل المقال