إضافة زر ملئ الشاشة لمدونات بلوجر

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


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

انقر للمعاينة!

طريقة إضافة زر ملئ الشاشة لمدونات بلوجر

من لوحة تحكم المدونة إذهب إلى المظهر أنقر على تعديل HTML ثم أبحث عن الرمز ]]></b:skin> ثم أضف الكود التالي فوقه مباشرةً

#openfull,
#exitfull {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 30px;
    height: 55px;
    line-height: 55px;
    float: left;
}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
    outline: 0;
}
#openfull svg,
#exitfull svg {
    vertical-align: middle;
}
#exitfull {
    display: none;
}

الخطوة الثانية أضف كود جافاسكربت فوق الرمز </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 & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/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>

أنقر على حفظ المظهر


يمكن الآن إضافة الرمز الآخير من خلال التخطيط أو من خلال المظهر في المكان الذي تراه مناسب لعرض الزر في مدونتك

<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen();"><svg width="28" height="28" viewbox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></path></svg></button>
<button aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen();"><svg width="24" height="24" viewbox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></path></svg></button>



ورمضان مبارك علينا وعليكم زوارنا الكرام 😊