كود اضافة الانتقال لأعلى الصفحة لمدونة بلوجر باستعمال مكتبة jQuery

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

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

طريقة الإضافة في مدونات بلوجر

أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن

]]></b:skin>

و مباشرة تحتها نضيف الكود التالي

<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery-1.3.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery.scrollTo-1.4.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery.fn.topLink = function(settings) {

settings = jQuery.extend({

min: 1,

fadeSpeed: 200,

ieOffset: 50

}, settings);

return this.each(function() {

//listen for scroll

var el = $(this);

el.css(&#39;display&#39;,&#39;none&#39;); //in case the user forgot

$(window).scroll(function() {

if(!jQuery.support.hrefNormalized) {

el.css({

&#39;position&#39;: &#39;absolute&#39;,

&#39;top&#39;: $(window).scrollTop() + $(window).height() - settings.ieOffset

});

}

if($(window).scrollTop() &gt;= settings.min)

{

el.fadeIn(settings.fadeSpeed);

}

else

{

el.fadeOut(settings.fadeSpeed);

}

});

});

};

$(document).ready(function() {

$(&#39;#top-link&#39;).topLink({

min: 400,

fadeSpeed: 500

});

//smoothscroll

$(&#39;#top-link&#39;).click(function(e) {

e.preventDefault();

$.scrollTo(0,300);

});

});

</script>

* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت الانتقال لأعلى الصفحة

ثم فوق هذا الكود مباشرة

]]></b:skin>

نضيف كود ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.

#top-link {
display:none;
position:fixed;
right:5px;
bottom:5px;
color:green;
font-weight:bold;
text-decoration:none;
border:1px solid green;
background:Lightgreen;
padding:10px;
} 

بعد ذلك نضع كود التالي مباشرة فوق </body> و نحفظ القالب.

<a href='#top' id='top-link'>إلى الأعلى</a>

طريقة الإضافة في مدونات ووردبريس:

1 - تحميل الإضافة من هنا Wp To Top

2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content

3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .

شارك هذا المنشور