معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour (https://www.bloggerexp.com/showthread.php?t=7641)

مدونة Alamfour 05-19-2013 02:18 PM
اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
بسم الله الرحمن الرحيم

الدرس اليوم هو كيفية اضافة زر الصعود لأعلى أي عند الضغط عليه يرتفع لأعلى الصفحة للتسهيل على الزائر ويكون المنظر جميلاً كما في مدونة AlamFour .

الخطوات:

اذهب الى تخطيط.
ثم اضغط اضافة أداة HTML\JavaScript
ثم ضع الكود التالي فيه.

اقتباس:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >


var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://im33.gulfup.com/pIUN1.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting. startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width ()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

</script>


يمكنك تغيير ما هو باللون الأحمر برابط الصورة التي تريدها.
اضغط حفظ.

تــــم بــــــوآسطـــة : http://1.bp.blogspot.com/-Z0hvcW0wky...1600/Alm-4.png

مدونة Alamfour 05-19-2013 03:50 PM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
أتمــنى أن يعجبكـــــــم

مدونة Alamfour 05-27-2013 08:57 PM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
فـــــــي إنتـــــــــــــــــظـــــــار رأيكـــــــــُـــــــم بالآدآة ;;

tar-i10 05-28-2013 08:30 PM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
جميل اخى جزاك الله خيرا ♥

مدونة Alamfour 05-28-2013 09:42 PM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
العفـــــــــــــــو أخــــــــي :):

Po!nt 05-29-2013 06:51 AM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
يرجى عدم وضع ردود بدون داعي بغرض رفع المشاركة فهذا مخالف لقوانين المعهد ... يرجى الإنتباه لذلك في جميع مشاركاتك حتى لا يتعرض حسابك للحظر

مرادكوووم 05-31-2013 05:43 PM
رد: اضافة زر الرجوع إلى أعلى لمدونات بلوجر ، مثل مدونة AlamFour
 
الف شكر
بارك الله فيكم


الساعة الآن 04:10 PM

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012