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

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

في درسنا اليوم سوف نتعرف على طريقة تركيب زز الصعود وزر النزول لمدونات بلوجر .

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

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML .

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 /* Back to Top and Down */
#BounceToTop{background:#D2D2D2;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none}#BounceToTop:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #a6a6a6;line-height:0}#BounceToTop:hover:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:0 15px 20px;border-color:transparent transparent #464646;line-height:0 }#BounceToTop:after{content:'';position:absolute;bottom:5px;right:11px;width:0;height:0;border-style:solid;border-width:0 9px 12px;border-color:transparent transparent #d2d2d2;line-height:0}#GoToDown{background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px}#GoToDown:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0;border-color:#333 transparent transparent;line-height:0}#GoToDown:hover:before{content:'';position:absolute;bottom:5px;right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0;border-color:#888 transparent transparent;line-height:0 }#GoToDown:after{content:'';position:absolute;top:5px;right:11px;width:0;height:0;border-style:solid;border-width:12px 9px 0;border-color:#fff transparent transparent;line-height:0} 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي فوقه .

 <script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$("#BounceToTop").fadeIn():$("#BounceToTop").fadeOut()}),$("#BounceToTop").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)});var o=$("body");$("#GoToDown").click(function(){$("html, body").animate({scrollTop:o.height()},800),$("#GoToDown").fadeOut()}),$("#BounceToTop").click(function(){$("#GoToDown").fadeIn()})});
</script>
<div id='BounceToTop'></div>
<div id='GoToDown'></div> 

انقر هنا للمعاينة