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

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

Unknown السبت، 4 أبريل 2015 0

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

طبعا إضافة زر الصعود إلى أعلى توفر الوقت والجهد لدى الزائر خاصة ان كان الموضوع الذي يقرأه طويلاً حيث يمكنه الصعود إلى أعلى بكل سلاسة وسهولة بعد إنتهاء الزائر من قراءة الموضوع

خطوات إضافة زر الصعود إلى أعلى

<< من لوحة التحكم الرئيسية في بلوجر >>
<< إختر (تخطيط) >>
 << إختر (إضافة أداة) وأختار (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="رابط الصورة هنا" />', //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);


    },

/*<a href='http://mido4tech.blogspot.com/2015/04/Button-BackTo-Top.html'></a>*/ 

    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')
/*<a href='http://mido4tech.blogspot.com'></a>*/ 

            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>

هـنا قم بإدخال رابط أيقونة زر الصعود الذي تريده مكان"رابط الصورة هنا" في الكود
هذه قائمة من أيقونات زر الصعود إلى أعلى أختر ما يناسبك..
انقر كلك يمين على الصورة واختر نسخ عنوان URL للصورة

 وبعد إجراء التعديلات أختر ( حفظ )

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

• تغريد
• مشاركة
• مشاركة
• مشاركة
• مشاركة

عن الكاتب :Unknown

محمد عمايرة مهتم بكل شيء متعلق بالتكنولوجيا والتقنية والعالم الالكتروني ويحب التعلم الذاتي.

تابعني على حسابي الشخصي

تنبية هام

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

رابط الموضوع

مواضيع قد تعجبك :