أضافه زر الصعود الى اعلى في مدونه بلوجر 2014

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

 

هذه الاضافه الجميله والسهل في التحميل ووالاضافه ، للإضافه ماعليك الا الذهاب الى لوحه التحكم في بلوجر ثم الى التخطيط  ثم اضافه اداه وأختيار  HTML/JavaScript .

ومن هنا انسخ الكود الموجود في الصندوق تحت والصق الكود في الفراغ الثاني من الصفحه 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" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.m5tar.blogspot.com * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.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>

للإضافه ما عليك الا تحميل الصور المعبره في احد موقع الرفع ومن ثم  تغيير رابط الصوره بالامتداد الصوره المرفوعه من قبلك .

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

http://www.4shared.com/download/ZlCsTsSPce/Arrow_up_blue.png
 http://www.4shared.com/download/1ZHghujace/Arrow_up_green.png
http://www.4shared.com/download/-vQFqMFIce/Arrow_up_red.png
http://www.4shared.com/download/vyi7XDMAba/Arrowaporange.png

وبالطبع فاللون الأصلي هو البرتقالي لكن الألوان الاخرى ما هي الا تعديل على الايقونه الاصليه ، الان ما عليك الا اختيار اللون الذي يناسبك او صمم لنفسك شكل اخر يعجبه وحطه . كما يمكنك تغيير النص إصعد الى الأعلى الموجود في الكود الى اي نص اخر تريده !
أما 100 فهي تشير الى عدد الاسطر التي تظهر بعدها الأضافه عند التصفح الى اسفل.

ارجوا من الله ان اكون قد وفقت في ايصال المعلومه كامله . وفي نهايه الدرس لا تنسى مشاركتنا افكارك وشير للدرس واعجاب للصفحه.

الدال على الخير كفاعله