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

زوار ومتابعي المدونة 

أسعد الله أوقاتكم بكل خير ومحبة 

اليوم سأتطرق لإضافة الكل يعرفها إلا وهي غضافة زر الصعود إلى أعلى .

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

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه :

الشكل الأول

للمشاهدة

الكود

#bs-bt-top-nav {position: fixed;cursor: pointer;background: rgba(0, 0, 0, 0.78);color: white;padding: 10px 20px;border-radius: 3px;bottom: 22px;right: 90%;}
#topcontent {margin-bottom: 10px;}
.c_images img {width: 57px;height: 57px;}
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }

4- بعد ذلك إبحث عن الوسم :  </body>

5- ضع الكود التالي فوقه :

<a id='bs-bt-top-nav' title='Back to top'>العودة الى أعلى</a>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#bs-bt-top-nav').show();
    } else {
        $('#bs-bt-top-nav').hide();
    }
});
$('#bs-bt-top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});
//]]>
</script>

الشكل الثاني

ـــــــــــــــ

1- إبحث عن الوسم : </body>

2- ضع الكود التالي فوقه :

<!--Auto Blog Scroll Widget by www.homeblog7.blogspo.com Starts-->
<style>
#bsautoscroll{position:fixed;z-index:9999;bottom:0;right:0}
#bsautoscroll a{display:block;float:left;background-color:#CC0099;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOQfQ-Zngm4tX5UsYrXOvRQhDljohkVP9aQYDrvUh8tZgGspK1vesb93VEhrIpCXAgyW-VrXw3zT8KV5OQSCwcZ4xw9gJyR11S0u1W2bo4mwvqtV77Plrcuqpmel28l9m9ZHKh_BzadamK/s1600/BS+Auto+Scroll.png);width:36px;height:36px;text-indent:-999em}
#bsautoscroll a.bsup{background-position:0 -36px}
#bsautoscroll a.bsdown{background-position:0 -72px}
#bsautoscroll a.bsbottom{background-position:0 -108px}
#bsautoscroll a.bsautoscroll{background-position:0 -144px}
#bsautoscroll a.bsstop{background-position:0 -180px}
#bsautoscroll a:hover{background-color:#8E006B}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='bsautoscroll'>
<a class='bstop' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>إلى أعلى</a>
<a class='bsup' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>أعلى الصفحة</a>
<a class='bsdown' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>أسفل الصفحة</a>
<a class='bsbottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>إلى أسفل</a>
<a class='bsautoscroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>أنتقال تلقائي</a>
<a class='bsstop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>توقف تلقائي</a>
</div>
<!-- End of Auto Blog Scroll Widget by- http://www.homeblog7.blogspo.com -->

- احفظ القالب .

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