اضافة زر الصعود الى اعلى فى المدونة بسهولة

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

درس اليوم سيكون عن إضافة جميلة سهلة التركيبة محبوبة عند الزوار

بعد هذا التقديم الشيق المليئ بالكلمات المثيرة ننتقل للدرس

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

فهي تخفف على الزائر عناء الرجوع إلى الأعلى كل مرة، خاصة إذا كانت تدويناتك طويلة ...

الجديد في هذه الإضافة أنها توفر صعودا سريع بتقنية jQuery 

مما يجعلها رائعة نتيجة للمأثرات التي تستخدمها،

 كما أن استعمالها سهل وممتع.

 وستروق لك بالطبع وسيحبها زوارك لأنها ستعطي انطباعا لهم انك تراعي لداتهم ووقتهم..

  إن أهم ما في هذه الإضافة أنها تظهر بعد عدة سطور أسفل الصفحة

وتختفي في كل مرة يصعد الزائر ويقارب سطح المدونة..

    إذا اقتنعت بإضافت الأداة بعد هذا العرض المفصل فاتبع الخطوات الآتية:

تركيب الإضافة سهل للغاية لن يِؤخد من وقتك دقيقة..

تركيب الإضافة:

1. لوحة التحكم >عناصر الصفحة > إضافة أداة > HTML/JavaScript
2. قم بلصق الكود التالي: 

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

<script type="text/javascript" > 

/*********************************************** 

* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 

* Modified by www.m5tar.blogspot.com 

* This notice MUST stay intact for legal use 

* Visit Project Page at http://www.dynamicdrive.com for full source code 

***********************************************/ 

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="رابط الصورة" />', //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:'إصعد إلى الأعلى !'})

                .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>

وأخيرا:

ضع مكان كلمة: رابط الصورة رابط إحدا هده الصور وإذا لم ترق لك أي صورة يمكن أن تبحث في google عن أي صورة بهدا الخصوص وتضيف رابطها مكان الكلمة...

 بعض الأيقونات المقترحة:

- و بإمكانك تغيير العنوان إصعد إلى الأعلى بأي إسم أخر..
- أما 100 فهي تشير إلى عدد الأسطر نحو السطح التي تظهر بعدها الإضافة..

الآن مبروك عليك لقد تمت إضافة هذه الأداة الجميلة بكل سهولة