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

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

الكاتب : mohamed التاريخ : الأحد، 8 يناير 2017 التعليقات : 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 للصورة

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

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

فيسبوك توتير جوجل + لينكدان بينتريست

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

الكاتب : mohamed

مواضيع ذات صلة قد تهمك ايضا