تركيب زر لتوسيع منطقة التدوينات لقوالب بلوجر

اضافة زر لتوسيع منطقة التدوينات بكامل عرض القالب

<style>

    #main-wrapper {

        transition: width 0.5s ease-in-out;

    }

    #sidebar-wrapper {

        transition: all 0.5s ease-in-out;

    }

  span.icon {

    font-family: &#39;bootstrap-icons&#39;;

}

  button#toggleFullScreen .icon {

    font-size: 29px;

    padding: 3px 7px 2px 32px;

}

</style>

<button id='toggleFullScreen' style='position: fixed;bottom: 66px;right: 30px;z-index: 1000;background: #3d88f7;color: white;border: none;border-radius: 3px;cursor: pointer;display: flex;align-items: center;gap: 5px;'>

    <span class='icon'>&#61776;</span>

</button>

<script>

    document.getElementById(&#39;toggleFullScreen&#39;).addEventListener(&#39;click&#39;, function () {

        var mainContent = document.querySelector(&#39;#main-wrapper&#39;); // استبدل &#39;.main-content&#39; بـ الكلاس الذي يحتوي على المواضيع في قالبك

        var sideBar = document.querySelector(&#39;#sidebar-wrapper&#39;); // استبدل &#39;.sidebar&#39; بـ الكلاس الخاص بـ القسم الجانبي

        var icon = this.querySelector(&#39;.icon&#39;); // عنصر الأيقونة

        var label = this.querySelector(&#39;.label&#39;); // النص

        if (!mainContent || !sideBar) return alert(&quot;تأكد من تحديث الكلاسات الصحيحة!&quot;); 

        if (sideBar.style.display === &#39;none&#39;) {

            sideBar.style.display = &#39;block&#39;;

            mainContent.style.width = &#39;calc(70% - 20px)&#39;; // حجم المحتوى الأساسي عند وجود السيدبار (يمكنك تعديله حسب القالب)

            icon.innerHTML = &#39;&#61776;&#39;; // رمز التوسيع

            label.innerText = &#39;عرض بعرض الشاشة&#39;;

        } else {

            sideBar.style.display = &#39;none&#39;;

            mainContent.style.width = &#39;100%&#39;;

            icon.innerHTML = &#39;&#61775;&#39;; // رمز الإغلاق

            label.innerText = &#39;عودة للشكل الطبيعي&#39;;

        }

    });

</script>

التعديلات