أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة. و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin لإنشاء هذه الإضافة الممتازة. و اعتماداعلى نفس الموضوع سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب. بسم الله نبدأ.
يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
و مباشرة تحتها نضيف الكود الموالي
* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت الانتقال لأعلى الصفحة ، إن أردت رفعهما على استضافتك الخاصة يمكنك تحميلهما من هنا . تحميل الملفين
ثم فوق هذا الكود مباشرة
نضيف كود ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.
بعد ذلك نضع كود ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب.
طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت و كودي css و xhtml في القالب.
رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.
يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير 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 في القالب.
رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.
التعليقات : 21
بارك الله فيك أخي محمد إضافة هائلة
مبدع كعادتك
وفقك الله
ألف شكر لك اخي محمد على الإضافة الرائعة
مبدع كعادتك
وفقك الله
" أه نسيت واش كلت ليك رمضان كريم و لا لا لمهم أولا كنت مكلتهاش هانا تنكولها إوا عدرني راك عارف دابا أش واقع لينا كلنا ديخين دايرين بحال الدجاج ههههه
لمهم تهلا ليا فراسك و عنداك تنسا و تقصي ههه "
دمت بود
السلام عليكم ورمضان كريم
شكرا لك أخي على هذه الإضافات
وفقك الله
و عليكم السلام و رحمة الله
رمضان مبارك و كل عام و أنتم إلى الله أقرب.
» أخي فؤاد شكرا و الله يخليك أخويا ، متخافش خوك حاضي جنابو حيت وقعات ليا بزاف خصوصا عند الوضوء.
» أخي خالد مرحبا بك و شكرا لك على طيب الكلام و زيارتك الكريمة.
رائع ..
أشكرك أخي ^_^
يعطيك العافيه ..
طبقت بعضها
مشكووور أخي الكريم
أريد أن أسألك أين يمكنني رفع الملفين أرجووك بسرعة إدا حبيت
مرحبا إخواني الكرام
يمكنك أخي الكريم استعمال google sites لرفعهما فهو يمكنك بالاتصال المباشر بملفات الجافاسكريبت
http://sites.google.com
تحياتي
الله يعافيك وصلت الخطوة الي تقول اضف بين وسمي بودي... وش معنى وسمي بودي...
ووينه بالضبط...
""
آخر خطوة ...
الي هي اضافة الكود الموالي....
تقدر تشرحة بالتفصيل....
حاولت ولاكن فقد جزء البداية
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
أين هذه الجزئية
لم أجد أفضل من " جزالك الله خير "
وأعلم أن خير الناس أنفعهم للناس
رائع جداً
أشكرك
^_^
جزاكم الله خيرا
إلي الأخ .. غير معروف
يقصد با الموالي=التالي
اما بخصوص body
أضغط علي
ctrl+f
و انت في البلوج الخاص بك
سوف يفتح لك مربع بحث هتكتب فيه body
و هتضع الكود فوقها
اخي الكريم هذه الاداه جميله ولكن يعيبها الاتي
حجمها كبير
تظهر بأستمرار وحتي في اعلي الصفحة
مشكور علي مجهودك
http://electron-boy.blogspot.com
صور حب 2013
صور رومانسية
فساتين سهره طويل
اغلفه فيس بوك
اغلفة للفيس بوك
اغلفه للفيس بوك رومانسي
صور انا احب لجميع الحروف
احدث ازياء 2013 اجدد ملابس 2013
اغلفه للفيس بوك رومانسي بناتي 2013
فساتين سهره قصيره جديده 2013
مدونه ازياء النسائيه
احدث موض فساتين زفاف
صور فساتين سوريه
عابايت جديده اخر موضه
ازياء جواكيت شتوية 2013
اجمل شنط يد عصرية 2013
مجوهرات راقية 2013
اجمل خواتم زواج 2013
صور مجوهرات ديور 2013
اجمل جوارب نسائية
دردشة بنات مصرية
لعبه تلبيس البطريق
لعبه قص الاضافر
لعبة الحرب الجديده 2013
لعبه سوبر ماريو الجديده
لعبه المزرعه السعيده
لعبه الدررجات انااريه 2013
لعبه العربيات الجديده
تحميل لعبه توم واجيري 2013
لعبة حرب الدبابات 2013
لعبه حرامي السيارات
لعبه سوبر ماريو الجزء الثاني
لعبة الجراج الجديده
لعبة سوبر ماريو القديمه
لعبه اسبونج بوب 2013
لعبه مايك اب للبنات فقط
لعبه تلبيس للبنات فقط
لعبه تكن
العاب تلبيس للبنات
لعبه تلبيس حقيقي
http://dreem-land.blogspot.com
إرسال تعليق
يمكن استخدام بعض علامات HTML، مثل <b>, <i>, <a>
أخي الكريم، رجاء قبل وضع أي كود في تعليقك، حوله بهذه الأداة ثم ضع الكود المولد لتجنب اختفاء بعض الوسوم.
» معرض قوالب بلوجر مدونة لعرض أفضل القوالب المطروحة على معهد خبراء بلوجر : منتدى خاص بالبلوجر لتبادل الخبرات بين مدوني البلوجر ومشاركة القوالب العربية والمعربة أو الأجنبية إضافة إلى التبادل الإعلاني وطرق الربح عن طريق مدونات بلوجر.الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.