اضافة جديد على المدونة اقدمها لكم اليوم وهى اضافة زر الصعود الى الاعلى بشكل خرافى وهذه الإضافة التى أستخدمها فى مدونتى حاليا ، وهذه الإضافة طلبها منى احد متابعى المدونة واقدمها لكم اليوم ويمكنك معاينة الإضافه من خلال المدونة فى اى صفحة عليها .
 |
| إضافة زر الصعود إلى الأعلى |
شرح التركيب لـ اضافة زر الصعود الى الاعلى بشكل خرافى
أبحث أولا عن هذا الوسم ]]></b:skin> ثم بعد ذلك قم وضع الكود التالى فوقه
/* back-to-top by flammainfo.com */
.smoothscroll-top {position: fixed;opacity: 0;visibility: hidden;overflow: hidden;text-align: center;z-index: 99;background-color: #E74C3C;color: #fff;line-height: 36px;right: 10px;bottom: -25px;transition: all 0.5s ease-in-out;transition-delay: 0.2s;font-weight: 100;font-size: 18px;width: 35px;height: 35px;}
.smoothscroll-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:10px}
.smoothscroll-top i.fa{line-height:inherit}
الأن أبحث عن هذا الوسم <body وقم بوضع الكود التالى فوقه
<div class='smoothscroll-top'>
<span class='scroll-top-inner'>
<i class='fa fa-hand-o-up'/>
</span>
</div>
الأن مع اخر كود أبحث عن هذا الوسم </body> وقم وضع الكود التالى فوقه
<script type='text/javascript'>
/* <![CDATA[ */
// back-to-top
$(function(){$(document).on( 'scroll',function(){if ($(window).scrollTop() > 100){$('.smoothscroll-top').addClass('show')}
else{$('.smoothscroll-top').removeClass('show')}}
);$('.smoothscroll-top').on('click',scrollToTop)}
);function scrollToTop(){verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset:0;element = $('body');offset = element.offset();offsetTop = offset.top;$('html,body').animate({scrollTop:offsetTop}
,600,'linear').animate({scrollTop:25}
,200).animate({scrollTop:0}
,150) .animate({scrollTop:0}
,50)}
/* ]]> */
</script>
بعد ذلك قم بحفظ القالب ومبروك عليك الإضافه الجديدة ، وباذن الله سوف نستمر فى إضافه المزيد من المواضيع تفيد الجميع.
هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق.
إضافة زر الصعود إلى الأعلى بشكل خرافى مثل مدونة فلاما للمعلوميات
ردحذفالأداة لا تعمل
ردحذف