أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة. و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin لإنشاء هذه الإضافة الممتازة. و اعتماداعلى نفس الموضوع سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب. بسم الله نبدأ.يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير 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('display','none'); //in case the user forgot
$(window).scroll(function() {
if(!jQuery.support.hrefNormalized) {
el.css({
'position': 'absolute',
'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
ثم فوق هذا الكود مباشرة
]]></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;
}
بعد ذلك نضع كود ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب.
<a href='#top' id='top-link'>إلى الأعلى</a>
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت و كودي css و xhtml في القالب.
رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.
التعليقات : 0
إرسال تعليق
أخي الكريم، رجاء قبل وضع أي كود في تعليقك، حوله بهذه الأداة ثم ضع الكود المولد لتجنب اختفاء بعض الوسوم.
الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.