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

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة اضافات بلوجر

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

متمنى من الله كامل الاستفادة لكم من هذا الموضوع ان شاء الله

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

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

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

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

بعد التسجيل ودخول المدونة الى لوحة التحكم
نضغط على تخطيط
بعد ذلك نضغط اضافة اداة 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>

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

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

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

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف: عبد الحكيم الحماني

عبد الحكيم الحماني 19 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بتطوير المواقع والتجارة الالكترونية يمكنك متابعته من خلال الفيسبوك . تويتر . جوجل بلس

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

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

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

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

الموضوع من طرف: عبد الحكيم الحماني

ضع تعليقا أخي الكريم

ليست هناك تعليقات:

إرسال تعليق

مواضيع متميزة

click ici

الدوري الاسباني

عدد الزوار اكثر من :

التسميات

المواضيع النشطة

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

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

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

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

الموضوع من طرف: عبد الحكيم الحماني

قد يهمك أيضا : إضافات blogger

ضع تعليقا أخي الكريم

ليست هناك تعليقات:

إرسال تعليق

مواضيع متميزة

click ici

الدوري الاسباني

عدد الزوار اكثر من :

التسميات

المواضيع النشطة

قد يهمك أيضا :
إضافات blogger