-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

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

السلام عليكم ورحمة الله تعالى وبركاته


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

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

خطوات إضافة زر الصعود إلى أعلى لمدونات بلوجر


تابع معي ...


أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - ثم قالب (المظهر) >>  تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
</head>
4 - أضف قبله الكود التالي (فوق)
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
5 - ثم ابحث عن الوسم التالي
 ]]></b:skin>
6 - أضف قبله الكود التالي (فوق)
.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;
}
6 - وأخيرا إبحث عن هذا الوسم
 </body>
7 - ثم أضف قبله الكود التالي (فوق)
<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>
إضغط على حفظ المظهر

الآن توجه الى مدونتك وشاهد النيجة


تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد فى طرحها
باب التعليقات مفتوح للجميع

كاتب الموضوع

محمد العربي

0 تعليق على موضوع : إضافة زر الصعود إلى أعلى بشكل احترافي (بلوجر)

  • اضافة تعليق

  • الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>