اضافة زر الصعود في مدونات بلوجر

في كل وقت نبحث عن اضافة راقية لمواقعنا لكي نجعل مظهر الموقع احلا بكتير في هذة التدوينة نقدم لكم اضافة زر الصعود الي الاعلي لمواقعنا

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

1. توجه لقالب >> تحرير 
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه

الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3. ابحث عن ]]></b:skin ثم ضع الكود التالي فوقه

.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;
}

4. ابحث عن <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);

الي هنا انتهينا من شرح تركيب الاضافة
لا تنسي تقيما للموضوع

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Artikel Lainnya