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




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

درسنا اليوم من إضافات بلوجر وهو كيفية وضع أداة الصعود لأعلى بمدونات بلوجر , فيوجد أحيانا بعض القوالب الغير معتمدة لهذه الاضافة ويريد صاحب المدونة باضافتها فهي تعطي شكلا جماليا وأيضا تساعد بالتنقل بسهولة الى أعلى الصفحة .


طريقة الإضافة 

- اذهب الى لوحة التحكم بمدونتك << التخطيط << إضافة أداة
- اختر اضافة أداة 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> 


- انتهت الاضافة ارجع لمعاينة القالب وسوف تجد انه تم الاضافة .
مشاركات أقدم المقال التالي
3 تعليق
  • شركة تصميم مواقع
    شركة تصميم مواقع 04‏/02‏/2015، 8:12:00 م

    إنها فكرة جيدة واشكركم علي مجهودكم المذهل إستمر.

  • غير معرف
    غير معرف 29‏/06‏/2015، 11:53:00 م

    ما عملتش

    • مداد الجليد
      مداد الجليد 01‏/07‏/2015، 12:07:00 ص

      أسف أخي هذا المقال مكتوب بطريقة غير صحيحة يرجى أتباع هذا الموضوع
      http://www.madad2.com/2013/07/blog-post_4.html
      أفضل طريقة لإضافة زر الصعود لأعلى الصفحة

أضف تعليق
عنوان التعليق