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

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

اولا :

من
 لوحة التحكم 
 قالب

HTMLتحرير      

كليك يسار في صفحة الأكواد

اضغط ( CTRL + F)

ابحث عن الوسم :

]]></b:skin>

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

/* ------http://aboumarwane2002.blogspot.com------- */
.button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bxrJHvFtdOnxEiRjT3ZTiP2LLB8ZLDiOmhN55sRnoy0jqbFLLFdCRrEF9Wa_pL6gN8rzi8tz3ArXuqlKZmalFwuufKb7TiXeFDR0e1XmRax_TwgGJhu5KfNoAHoswLzePsp5KPvX47A/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
}
.button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieR4Vc2fQK4cOa1jAm_32Lh2saZXszxxmgX7r2wLzeyiNMuWL7XaBHkaAnpegf3LiZCNw7SG6caN3NsCOyVS8ptgmEoq1o9g3TYI2672i5NPgD4puhhb9hC40mcdPemhyphenhyphenq9b9vVfpqEDc/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
}
/* ------http://aboumarwane2002.blogspot.com------- */

شرح الكود السابق :

/* ------http://aboumarwane2002.blogspot.com------- */

  سهم الصعود
.button_up{

padding:7px;
background-color:white;   خلفية سهم الصعود وفي هذه الحالة بيضاء
border:1px solid #CCC;    سمك ولون حافة الخلفية
position:fixed;

   صورة سهم الصعود ... ولك الاختيار
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bxrJHvFtdOnxEiRjT3ZTiP2LLB8ZLDiOmhN55sRnoy0jqbFLLFdCRrEF9Wa_pL6gN8rzi8tz3ArXuqlKZmalFwuufKb7TiXeFDR0e1XmRax_TwgGJhu5KfNoAHoswLzePsp5KPvX47A/s16/arrow_up.png) no-repeat top left;

background-position:50% 50%;

  طول وعرض خلفية صورة سهم الصعود
width:20px;
height:20px;


عند اصافة الكود ستلاحظ ان السهمين في المنتصف ومتقاربان جدا.....واذا اردتهما متباعدان فغيرالقيمة 280الي اكثر من ذلك وستلاحظ ان صورة سهم الصعود تصعد كلما زادت القيمة
...مثلا 600
bottom:280px;

جهة سهم الصعود وفي هذه الحالة ...جهة اليمين ولك الاختيار يمين او يسار
right:5px;

white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
}

  سهم النزول
.button_down{           


padding:7px;
background-color:white;   خلفية سهم الصعود وفي هذه الحالة بيضاء
border:1px solid #CCC;   سمك ولون حافة الخلفية
position:fixed;

  صورة سهم النزول ... ولك الاختيار
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieR4Vc2fQK4cOa1jAm_32Lh2saZXszxxmgX7r2wLzeyiNMuWL7XaBHkaAnpegf3LiZCNw7SG6caN3NsCOyVS8ptgmEoq1o9g3TYI2672i5NPgD4puhhb9hC40mcdPemhyphenhyphenq9b9vVfpqEDc/s16/arrow_down.png) no-repeat top left;

background-position:50% 50%;

  طول وعرض خلفية صورة سهم النزول
width:20px;
height:20px;

عند اضافة الكود ستلاحظ ان السهمين في المنتصف ومتقاربان جدا.....واذا اردتهما متباعدان فغيرالقيمة 242الي0 وستلاحظ ان صورة سهم النزول في الاسفل
bottom:242px;

جهة سهم النزول وفي هذه الحالة ...جهة اليمين ولك الاختيار يمين او يسار
right:5px;

white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
}

/* ------http://aboumarwane2002.blogspot.com------- */

اقترح عليك بعض صور الاسهم وهي اصلا اسهم الصعود للاعلى

   

وقد قمت بعكسها لتصبح اسهم النزول للاسفل

   

وفي هذه المعاينة قمت بتغيير رابط  صورة سهم الصعود والنزول برابط صورة سهم الصعود والنزول خاصتي 

هذه :

ومع تغيير مايلي :

سهم الصعود

  طول وعرض خلفية صورة سهم الصعود

width:30px;

height:30px;

bottom:607px;

سهم النزول

  طول وعرض خلفية صورة النزول

width:30px;

height:30px;

bottom:0px;

اما باقي قيم الكود تركتها كما هي

المعاينة

ثانيا :

ابحث عن الوسم :

</body>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

بهذه الطريقة يتم تركيب الاضافة على مدوناتكم  ...

....وارجو ان تنال اعجابكم .

استودعكم الله

والسلام عليكم

المصدر :