اضافة زر ملىء الشاشة على بلوجر بسهولة لجعل الزائر يبقى مدة أطول! 2022

مميزات الزر

1. زيادة الأرباح بسبب جعل الزائر يستمتع بالقراءة
2. تحسين معدل ارتداد الموقع مما يجعل جوجل تحسن الترتيب
3. الحصول على اشارة تسهيل استخدام الموقع في احصائيات بحث جوجل
4. إمكانية إستخدامه في أي مكان حسب القالب
5. إمكانية التعديل على الزر لعمل أشياء أخرى مثل كود js لفيديو أو محتوى مضمن iframeو إن وجدت دعما على هذا الدرس سانشر كل ماقلته سابقا على مقالات مصغرة مطورة تماما على يدي
6. جعل الموقع أكثر سهولة في العمل لأن هذه الخاصية متوفرة في أغلب المتصفحات ولكن يصعب عملها بسبب تغير متصفح عن ٱخر.
7. عدم تثقيل الموقع لأن الكود قصير وليس بذلك الحجم الكبير جدا والمزعج لجوجل

طريقة اضافة الزر

1. نضيف الأكواد التالية الخاصة بالشكل فوق </style>

#exitfull,#openfull{background:0 0;border:none;cursor:pointer;padding:0;margin:0;text-align:center}
#exitfull:active,#exitfull:focus,#openfull:active,#openfull:focus{outline:0}
#exitfull svg,#openfull svg{vertical-align:middle}
#exitfull{display:none}

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

2. ثانيا نضيف اكواد التالية الخاصة بعمل الزر التي تقوم بملىء والغاء ملىء الشاشة فوق </body>

<script>
  //<![CDATA[
var elem = document.documentElement; 
function openFullscreen() {
if (elem.requestFullscreen) { elem.requestFullscreen(); }
else if (elem.mozRequestFullScreen) { /* Firefox */elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari dan Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE Atau Edge */ elem.msRequestFullscreen(); } document.getElementById("openfull").style.display = "none"; document.getElementById("exitfull").style.display = "block";} 
function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } document.getElementById("openfull").style.display = "block"; document.getElementById("exitfull").style.display = "none"; }
//]]>
</script>

والأن ضع الكود التالي الخاص بالزر في المكان المراد مثل في النافبار أو القائمة السفلية أو بين أكواد مواقع تواصل الإجتماعي ليكون زر غير مفسد للشكل وللإستشارة يوجد صندوق التعليقات والرد يكون 20h/24h.

<span>
    <button aria-label='Mode Fullscreen' id='openfull' onclick='openFullscreen();'>
    <svg height='24' viewBox='0 0 24 24' width='24'><path d='M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z' fill='#000000'/></svg>
    </button>
<button aria-label='Mode Tidak Fullscreen' id='exitfull' onclick='closeFullscreen();'>
<svg height='24' viewBox='0 0 24 24' width='24'><path d='M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z' fill='#000000'/></svg>
</button>
</span>

قبل ان ننهي الدرس الكود المعلم عليه هو الكود المتحكم بلون الزر ان أردت تغيير لون الزر عليك فقط تغيير ذلك الكود بأي كود فلات وعلى سبيل المثال لو أردت تغيير لون الزر من الأسود الى الأبيض فعليك تغيير #000000 ب #ffffff