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

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

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

تركيب الإضافة

• اذهب الى قالب ثم تحرير HTML ثم ابحث عن 

</head>

• ضع فوقه هذا الكود :

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

• الان ابحث عن هذا الوسم : 

]]></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;

}

 • و اخيرا ابحث عن هذا الوسم : 

</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>

 • احفظ القالب و مبروك عليك الاضافة :)

من فضلك اضغظ لايك لمشاهدة لينك التحميل

لا تبخل باعجــاب أو مشاركــة للمقــال

→ اعجــــاب

Tweet

→ مشــاركــة