افضل طريقة لأضافة زر الصعود إلى أعلى لمدونات بلوجر 2015

موضوعنا اليوم هو عن اضافة فى غاية الروعة والجمال وهى زر الصعود لأعلى

اى عند الضغط عليه يرتفع لأعلى الصفحة وذلك للتسهيل على الزائر

وهذه ستكون صورته

الخطوات التركيب بالمدونة :

بعد التسجيل ودخول المدونة الى لوحة التحكم

نضغط على تخطيط

بعد ذلك نضغط اضافة اداة 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>

وبعده تضغط حفظ

الف مبروك تم تركيب الاداة بنجاح

رجاءّ اذا واجهتك اى مشكلة فى وضع الاكواد لاتترد فى طرحها علينا

وسنقوم بأذن الله بحلها فوراّ

افضل طريقة لأضافة زر الصعود إلى أعلى لمدونات بلوجر 2015

موضوعنا اليوم هو عن اضافة فى غاية الروعة والجمال وهى زر الصعود لأعلى

الخطوات التركيب بالمدونة :

الف مبروك تم تركيب الاداة بنجاح

0 التعليقات:

إرسال تعليق

إنضم إلى صفحتنا في الفيسبوك

المشاركات الشائعة

افضل طريقة لأضافة زر الصعود إلى أعلى لمدونات بلوجر 2015

موضوعنا اليوم هو عن اضافة فى غاية الروعة والجمال وهى زر الصعود لأعلى

الخطوات التركيب بالمدونة :

الف مبروك تم تركيب الاداة بنجاح

0 التعليقات:

إرسال تعليق

إنضم إلى صفحتنا في الفيسبوك

المشاركات الشائعة

احصل على أجدد مواضيعنا أول بأول