| 21 تعليقات ]

أغلب مدونات ووردبريس 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(&#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;
}

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

<a href='#top' id='top-link'>إلى الأعلى</a>
طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .

طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت و كودي css و xhtml في القالب.

رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.


التعليقات : 21

مدونة فؤاد

بارك الله فيك أخي محمد إضافة هائلة
مبدع كعادتك
وفقك الله

فؤاد

ألف شكر لك اخي محمد على الإضافة الرائعة
مبدع كعادتك
وفقك الله
" أه نسيت واش كلت ليك رمضان كريم و لا لا لمهم أولا كنت مكلتهاش هانا تنكولها إوا عدرني راك عارف دابا أش واقع لينا كلنا ديخين دايرين بحال الدجاج ههههه
لمهم تهلا ليا فراسك و عنداك تنسا و تقصي ههه "
دمت بود

خالد

السلام عليكم ورمضان كريم
شكرا لك أخي على هذه الإضافات
وفقك الله

Unknown

و عليكم السلام و رحمة الله
رمضان مبارك و كل عام و أنتم إلى الله أقرب.
» أخي فؤاد شكرا و الله يخليك أخويا ، متخافش خوك حاضي جنابو حيت وقعات ليا بزاف خصوصا عند الوضوء.

» أخي خالد مرحبا بك و شكرا لك على طيب الكلام و زيارتك الكريمة.

SOUL

رائع ..

أشكرك أخي ^_^

GrindFilm

يعطيك العافيه ..

طبقت بعضها

غير معرف

مشكووور أخي الكريم
أريد أن أسألك أين يمكنني رفع الملفين أرجووك بسرعة إدا حبيت

Unknown

مرحبا إخواني الكرام
يمكنك أخي الكريم استعمال google sites لرفعهما فهو يمكنك بالاتصال المباشر بملفات الجافاسكريبت
http://sites.google.com
تحياتي

غير معرف

الله يعافيك وصلت الخطوة الي تقول اضف بين وسمي بودي... وش معنى وسمي بودي...

ووينه بالضبط...

""

غير معرف

آخر خطوة ...
الي هي اضافة الكود الموالي....
تقدر تشرحة بالتفصيل....

على لوشا

حاولت ولاكن فقد جزء البداية
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن

أين هذه الجزئية

Amatullah

لم أجد أفضل من " جزالك الله خير "
وأعلم أن خير الناس أنفعهم للناس

نحم المحبه

رائع جداً
أشكرك
^_^

الرحـــيق المختـــوم

جزاكم الله خيرا

الرحـــيق المختـــوم

إلي الأخ .. غير معروف

يقصد با الموالي=التالي

اما بخصوص body

أضغط علي
ctrl+f

و انت في البلوج الخاص بك
سوف يفتح لك مربع بحث هتكتب فيه body

و هتضع الكود فوقها

Unknown

اخي الكريم هذه الاداه جميله ولكن يعيبها الاتي
حجمها كبير
تظهر بأستمرار وحتي في اعلي الصفحة
مشكور علي مجهودك
http://electron-boy.blogspot.com

Unknown

صور حب 2013
صور رومانسية
فساتين سهره طويل
اغلفه فيس بوك
اغلفة للفيس بوك
اغلفه للفيس بوك رومانسي
صور انا احب لجميع الحروف
احدث ازياء 2013 اجدد ملابس 2013
اغلفه للفيس بوك رومانسي بناتي 2013
فساتين سهره قصيره جديده 2013
مدونه ازياء النسائيه
احدث موض فساتين زفاف
صور فساتين سوريه
عابايت جديده اخر موضه
ازياء جواكيت شتوية 2013
اجمل شنط يد عصرية 2013
مجوهرات راقية 2013
اجمل خواتم زواج 2013
صور مجوهرات ديور 2013
اجمل جوارب نسائية

Unknown


دردشة بنات مصرية
لعبه تلبيس البطريق
لعبه قص الاضافر
لعبة الحرب الجديده 2013
لعبه سوبر ماريو الجديده
لعبه المزرعه السعيده
لعبه الدررجات انااريه 2013
لعبه العربيات الجديده
تحميل لعبه توم واجيري 2013
لعبة حرب الدبابات 2013
لعبه حرامي السيارات
لعبه سوبر ماريو الجزء الثاني
لعبة الجراج الجديده
لعبة سوبر ماريو القديمه
لعبه اسبونج بوب 2013
لعبه مايك اب للبنات فقط
لعبه تلبيس للبنات فقط
لعبه تكن
العاب تلبيس للبنات
لعبه تلبيس حقيقي

غير معرف
أزال المؤلف هذا التعليق.
غير معرف
أزال المؤلف هذا التعليق.
غير معرف

http://dreem-land.blogspot.com

إرسال تعليق


يمكن استخدام بعض علامات HTML، مثل <b>, <i>, <a>

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

» معرض قوالب بلوجر مدونة لعرض أفضل القوالب المطروحة على معهد خبراء بلوجر : منتدى خاص بالبلوجر لتبادل الخبرات بين مدوني البلوجر ومشاركة القوالب العربية والمعربة أو الأجنبية إضافة إلى التبادل الإعلاني وطرق الربح عن طريق مدونات بلوجر.