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

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

    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

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


مقالات ذات صلة

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

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

الاشعارات

Disqus Logo