2 نوفمبر 2014

مدون محترف اضافات بلوجر CSS jQuery اضافة سهم الصعود إلى بداية صفحة المدونة

اضافة سهم الصعود إلى بداية صفحة المدونة


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

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

  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
الان  ابحث عن الوسم </head> و اضف الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
و الان  ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Back Top */
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}
ابحث عن الوسم </body> و اضف الكود التالي فوقه
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(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');
}
//]]>
</script>


لإضافته مع تأثير الإرتداد اضف الكود التالي بدلا من الكود السابق

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(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>

معاينة

هذا كل شيء اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق

مواضيع ذات صلة
اضافة سهم الصعود إلى بداية صفحة المدونة
4 / 5
بواسطة

هناك 18 تعليقًا :

  1. الشرح مش واضح والطريقه مش شغاله يعنى =q

    ردحذف
    الردود
    1. اخي الطريقة تعمل 100%

      انت فقط قم بتركيب الاكواد بالطريقة الصحيحة يا طيب و سوف تعمل
      عند اضافة الكود فوق </body> يجب اختيار احد الكودين فوق و ليس وضع الإثنين معا

      جرب و ردلي خبر

      بالتوفيق =r

      حذف
  2. الطريقة تعمل
    بس في بعض الناس مو واضخ لهم
    غير (لإضافته مع تأثير الإرتداد اضف الكود التالي) لـ (لإضافته مع تأثير الإرتداد اضف الكود التالي بدلا عن السابق) حتى يعرفوا :)

    شكرا على الاضافة

    ردحذف
    الردود
    1. شكرا لك يا غالي
      وكلامك صحيح كان يجب وضع كلمة بدلا من السابق
      تم التصحيح انرت المدونة بتعليقك =r

      حذف
  3. الردود
    1. لو قرأتي التعليقات كنتي ستري ان الإضافة تعمل
      و انا متأكد انك اضفتي الاكواد غلط

      بالتوفيق=r

      حذف
  4. الاضافه تعمل 100%
    وما غير ذلك خطأ شخصى
    ااااااااااااحلى تحيه وشكرااااااا على الاضافه الجامده والمجهود الجبار

    ردحذف
    الردود
    1. شكرا لك اخي احمد
      و الشكر لله يا غالي
      انرت المدونة بتعليقك

      احترامي لشخصك الكريم =r

      حذف
  5. مشكور بارك الله فيك شرح واضح الاضافة تشتغل =q

    ردحذف
    الردود
    1. شكرا لك اخي Ishak لمرورك و تعليقك =r

      حذف
  6. مشكوووورأخي الكريم =q

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

    ردحذف
  8. هههههههههههه لا شكر على واجب يا غالي
    و تصدق انا لا استخدم هذه الإضافة في مدونتي
    سُعدت مرورك =r

    ردحذف
  9. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك صديقي لا ننشر رواطب إشهار

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r