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

اضافة زر الصعود الى الاعلى

لتسهيل التنقل بين المواضيع للزوار

صورة الزر الاول

http://im33.gulfup.com/pIUN1.png

صورة الزر الثاني

http://im33.gulfup.com/izQVs.png

صورة الزر الثالث

http://im33.gulfup.com/nEndK.png

صورة الزر الرابع

http://im33.gulfup.com/IiUkB.png

صورة الزر الخامس

http://im33.gulfup.com/bBmlh.png

صورة الزر السادس

http://im33.gulfup.com/ARoK4.png

الصورة الموجودة في الاضافة رقم 1

الخطوات التركيب 

• نذهب الى لوحة التحكم
•  تخطيط 
• اضافة اداة  HTML/JavaScript
• ثم نضع الكود التالى 

لتغيير صورة الزر غير الرابط الذي باللون الاحمر

الكود

</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><script type="text/javascript" ></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var scrolltotop={</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">controlHTML: '<img src="http://im33.gulfup.com/pIUN1.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">state: {isvisible:false, shouldvisible:false},</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">scrollup:function(){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">if (!this.cssfixedsupport) //if control is positioned using JavaScript</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.$control.css({opacity:0}) //hide control immediately after clicking it</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">dest=jQuery('#'+dest).offset().top</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">else</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">dest=0</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.$body.animate({scrollTop: dest}, this.setting.scrollduration);</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">},</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">keepfixed:function(){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var $window=jQuery(window)</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.$control.css({left:controlx+'px', top:controly+'px'})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">},</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">togglecontrol:function(){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var scrolltop=jQuery(window).scrollTop()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">if (!this.cssfixedsupport)</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.keepfixed()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.state.shouldvisible=(scrolltop>=this.setting. startline)? true : false</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">if (this.state.shouldvisible && !this.state.isvisible){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.state.isvisible=true</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">}</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">else if (this.state.shouldvisible==false && this.state.isvisible){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">this.state.isvisible=false</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">}</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">},</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">init:function(){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">jQuery(document).ready(function($){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var mainobj=scrolltotop</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">var iebrws=document.all</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.$control=$('<div id="topcontrol">

'+mainobj.controlHTML+'</div>

')</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">.attr({title:'Scroll Back to Top'})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">.click(function(){mainobj.scrollup(); return false})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">.appendTo('body')</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.$control.css({width:mainobj.$control.width ()}) //IE6- seems to require an explicit width on a DIV containing text</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.togglecontrol()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.scrollup()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">return false</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">$(window).bind('scroll resize', function(e){</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">mainobj.togglecontrol()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">})</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">}</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">}</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;">scrolltotop.init()</font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"><br></font></p>

</div>

<div>

<p>

<font style="font-size: 12px; line-height: 26px;"></script>