إضافة زر تكبير الشاشة والصعود للأعلى

السلام عليكم ورحمة الله تعالى وبركاته, اليوم سوف نطرح لكم اداة جديدة للصعود للأعلى وتكبير الشاشة, اي اضافتان ملتصقتان مع بعضهما البعض, هذه الاضافة قمت بتركيبها على قالب المدونة قبل أيام, وطلبها مني العديد من الأشخاص لدى قررت ان انشر طريقة تركيبها, يمكنكم معاينة الاضافة في القالب الذي استعمله حاليا, الاضافة حصرية 100% من تصميمي طبعا, وتحتوي على لونين مختلفين يمكنكم تغيير الالوان لتكون متناسقة مع قالبكم, لن اطيل عليكم الكلام كثيرا 😂 ولننتقل الى شرح طريقة التركيب.

صورة للاضافة

طريقة تركيب الاضافة 

لتركيب الاضافة علينا اولا فتح لوحة تحكم المدونة ثم ننتقل الى تحرير القالب.

1. نبحث عن الوسم ]]></b:skin> باستعمال Cntr+f
2. ثم نضع الاكواد التالية فوقه مباشرة

/*=================================================
Scroll to top and full screen "www.Nak1ha.com" :D
==================================================*/
.scrollToTop {
    width: 50px;
    height: 50px;
    padding: 3px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    position: fixed;
    border-radius: 50% 50% 0 0;
    color: #fff !important;
    z-index: 9;
    bottom: 70px;
    line-height: 52px;
    font-size: 24px;
    background-color: #0099cc;
    transition: all 0.5s ease-in-out;

اقرأ ايضا: اضافة اداة المرفقات لبلوجر

    right: 7px;
}
.scrollToTop:hover{
    opacity: .8;
text-decoration:none;
}
.fullscreene:hover{
    opacity: .8;
text-decoration:none;
}
.fullscreene {
right: 7px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: -3px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    position: fixed;
    transition: all 0.5s ease-in-out;
    border-radius: 0 0 50% 50%;
    color: #fff !important;

اقرأ ايضا: اضافة قائمة مميزة على المدونة

    z-index: 9;
bottom: 20px;
line-height: 52px;
font-size: 24px;
background-color: #243748;
cursor:pointer;
}

1. الآن علينا البحث عن الوسم </body> ستجدونه في آخر القالب وسنضع فوقه مباشرة هذان السكريبتات واكواد ظهور الاضافة

<script>
// back-to-top
$(function(){$(document).on( &#39;scroll&#39;,function(){if ($(window).scrollTop() &gt; 100){$(&#39;.scrollToTop&#39;).addClass(&#39;show&#39;)}
else{$(&#39;.scrollToTop&#39;).removeClass(&#39;show&#39;)}}
);$(&#39;.scrollToTop&#39;).on(&#39;click&#39;,scrollToTop)}
);function scrollToTop(){verticalOffset = typeof(verticalOffset) != &#39;undefined&#39; ? verticalOffset:0;element = $(&#39;body&#39;);offset = element.offset();offsetTop = offset.top;$(&#39;html,body&#39;).animate({scrollTop:offsetTop}
,600,&#39;linear&#39;).animate({scrollTop:25}
,200).animate({scrollTop:0}
,150) .animate({scrollTop:0}
,50)}
 </script>
<script type='text/javascript'>
//<![CDATA[
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||  

اقرأ ايضا:إضافة احسب عمرك بالتفصيل

   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {
      document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}
//]]>
 </script>
<a class='fullscreene' onclick='toggleFullScreen()' value='click to toggle fullscreen'><i class='fa fa-desktop'/></a>
<a class='scrollToTop' href='#'><i class='fa fa-plane'/></a>

1. ثم أخيرا نقوم بعمل حفظ للقالب ومبروك عليك الاضافة.