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

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
مرحبا بك في موقعنا ! :) .. للبحث عنا من جوجل يمكنك كتابة "نكهة التقنية" أو "Nak1ha" ! لا تنس جعل المدونة الصفحة الرئيسية لمتصفحك! :)
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الاثنين، 1 مايو، 2017

8:09:00 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
nak1ha%2Bfull
السلام عليكم ورحمة الله تعالى وبركاته, اليوم سوف نطرح لكم اداة جديدة للصعود للأعلى وتكبير الشاشة, اي اضافتان ملتصقتان مع بعضهما البعض, هذه الاضافة قمت بتركيبها على قالب المدونة قبل أيام, وطلبها مني العديد من الأشخاص لدى قررت ان انشر طريقة تركيبها, يمكنكم معاينة الاضافة في القالب الذي استعمله حاليا, الاضافة حصرية 100% من تصميمي طبعا, وتحتوي على لونين مختلفين يمكنكم تغيير الالوان لتكون متناسقة مع قالبكم, لن اطيل عليكم الكلام كثيرا 😂 ولننتقل الى شرح طريقة التركيب.
صورة للاضافة
%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8%2B%25D9%2586%25D9%2583%25D9%2587%25D8%25A9%2B%25D8%25A7%25D9%2584%25D8%25AA%25D9%2582%25D9%2586%25D9%258A%25D8%25A9%2Bv2
طريقة تركيب الاضافة 
لتركيب الاضافة علينا اولا فتح لوحة تحكم المدونة ثم ننتقل الى تحرير القالب.
  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. ثم أخيرا نقوم بعمل حفظ للقالب ومبروك عليك الاضافة.
اذا واجهتك اي مشكلة في تركيب القالب فباب التعليقات مفتوح للجميع وسنرد على مشكلته فور رؤية التعليق.
اذا كانت هذه اول مرة تزور فيها المدونة لا تنسى الانضمام للمدونة من هنا لتتوصل بجديدنا
والى اللقاء الى موضوع جديد, دمتم في آمان الله

إرسال تعليق

مقالات