اضافة زر الصعود لأعلى على شكل صاروخ
اليوم موعدنا مع اضافة حصرية وكيفية اضافة زر الصعود لاعلى على شكل صاروخ
معاينة الاضافة
- نذهب الى لوحة التحكم ثم تحرير Html ثم قالب
- نبحث عن الرمز</body> و نضيف الكود التالى فوقه مباشرة
<style>
#rocketbacktotop{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLiQNfzqSg50YavVm_QTtl5Q0nDP2-E646hdR7POAEK3Gq4HHh6LSuw64Kc5E30qeL1TeTLT0t6PM4tYzsp4q0XjOGqe4CJD7yPabwkpralhru3F-5fDNZjOYAyyLEurpqJBYhCSgP3A9n/s1600/back-to-top-sprite-30224d9b.png') 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
z-indez:1;
}
#rocketbacktotop:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLiQNfzqSg50YavVm_QTtl5Q0nDP2-E646hdR7POAEK3Gq4HHh6LSuw64Kc5E30qeL1TeTLT0t6PM4tYzsp4q0XjOGqe4CJD7yPabwkpralhru3F-5fDNZjOYAyyLEurpqJBYhCSgP3A9n/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by Dabourphone -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#rocketbacktotop").removeAttr("href");$("#rocketbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#rocketbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#rocketbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by dabourphone Blog -->
<a href='#' id='rocketbacktotop'></a>
الى هنا انتهى موضوعنا اليوم اى مشكلة اطرحها فى التعليقات وسوف يتم الرد فوراً باذن الله
اضف تعليقاً عبر:
الابتسامات