إضافة زر الصعود إلي أعلي بسهولة في مدونات بلوجر - كوليكا ويب | هدفنا تطوير الويب العربي

صفحات المدونة

    Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

و تقديم كل ماهو جديد و كل ما يخص بلوجر.


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

طريقة التركيب :
- قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة
Html / Javascript
و قم بلصق الكود هذه و تمتع بالإضافة في موقعك



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

</center>


<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="https://i.imgur.com/EWP00FB.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);



    },


/*<a href='http://www.bloggeradsenseo.blogspot.com/2013/10/add-go-up-to-top-arrow-up.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://BloggerAdsenSeO.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>

يمكنك تغيير شكل زر الصعود الي اعلي عن طريق تغيير هذا الرابط 

https://i.imgur.com/EWP00FB.png

برابط الزر الزي تريده.
اذا واجهتك اي مشكلة او تريد اي استفسار تفضل بوضعه في التعليقات. 


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


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

طريقة التركيب :
- قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة
Html / Javascript
و قم بلصق الكود هذه و تمتع بالإضافة في موقعك



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

</center>


<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="https://i.imgur.com/EWP00FB.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);



    },


/*<a href='http://www.bloggeradsenseo.blogspot.com/2013/10/add-go-up-to-top-arrow-up.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://BloggerAdsenSeO.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>

يمكنك تغيير شكل زر الصعود الي اعلي عن طريق تغيير هذا الرابط 

https://i.imgur.com/EWP00FB.png

برابط الزر الزي تريده.
اذا واجهتك اي مشكلة او تريد اي استفسار تفضل بوضعه في التعليقات. 


تحميل التعليقات

تابعنا عبر البريد الالكتروني

الاشعارات

Disqus Logo