الطريقة الابسط لاضافة زر الصعود لاعلى فى مدونات بلوجر وباحترافيه CSS

محمد شومان

اضافات 0 التعليقات MHShoman

الطريقة الابسط لاضافة زر الصعود لاعلى فى مدونات بلوجر وباحترافيه CSS

بسم الله الرحمن الرحيم

اقدم لكم اليوم

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

اضافة رائعة ( زر الصعود لأعلى مدونتك ) من الاضافات المهمة

لتسهل على زائرك حرية الانتقال الى اعلى المدونة ببساطة

شكل الاضافة :

الخطوات :

اولا : ادخل الى لوحة تحكم مدونتك
او من هنا
ثم الى تخطيط
ثم اضافة اداة

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" > 
    /*********************************************** 
    * Modified by http://eblogerhelp.blogspot.com 
    * This notice MUST stay intact for legal use 
    * Visit Project Page at http://eblogerhelp.blogspot.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>

اخيرا اضغط حفظ وافتح مدونتك
واستمتع باجمل اضافة

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

محمد شومان

محمد من مواليد 22 سبتمبر سنة 1993,مصرى الجنسية ومقيم فى مصر من المنصورة,مسلم و الحمد لله،أحب جداً بلوجر وأعشق التصميم والفوتوشوب،متابع أخبار التقنية | قناتى المفضلَّه (national geographic) أحب كل الناس ولا أكره أحد.. الفيسبوك | جوجل بلس | يوتيوب |

ليست هناك تعليقات:

إرسال تعليق

^ Scroll to Top