اضافة زر العودة الى الاعلى بشكل خرافى مثل عالم المدون

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

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

اضافة زر العودة الى الاعلى بشكل خرافى مثل عالم المدون

معاينة الإضافة

معاينة 

صورة من الإضافه

اضافة زر الصعود الى الاعلى بشكل خرافى مثل عالم المدون

شرح التركيب لـ اضافة زر الصعود الى الاعلى بشكل خرافى مثل عالم المدون

أبحث أولا عن هذا الوسم]]></b:skin>ثم بعد ذلك قم وضع الكود التالى فوقه

/* back-to-top by wdbloog.blogspot.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>

بعد ذلك قم بحفظ القالب ومبروك عليك الإضافه الجديد ، وباذن الله سوف نستمر فى إضافه المزيد من المواضيع تفيد الجميع.

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .