هذه هى احد الاضافات الجميلة التى وجدتها فى كثير من المواقع الاجنبية التى تهتم بالبلوجر، و لقد قمت بنقلها اليكم نظرا لاننى وجدتها رائعة خاصة لتلك المواقع التى تعرض شروحات او اعمالها بالصور، مثل المواقع المتخصصة فى قوالب البلوجر التى تعرض صورة مصغرة للقالب، و بالتالى يمكنك تكبيره للمعاينة بدون الحاجة الى فتح نافذة جديدة او الخروج من التدوينة الحالية، او المواقع التى تهتم بالتحليل الفنى و تعرض شارتات الاسهم وهكذا، ايضا يمكنك استخدام هذه الاضافة فى اى مدونة اخرى و ليس شرطا البلوجر، و لتوضيح طريقة عمل الاضافة اضغط على الصورة التالية.
الملفات المطلوبة.
- ملف jquery.magnifier.js وهو الملف الذى يحوى الاسكربت الخاص بتكبير الصورة عند الضغط عليها.
- ملف magnify.cur وهو الذى يظهر يجعل مؤشرة الماوس على شكل عدسة مكبرة عند مروره على الصورة عليه.
اولا : يتم رفع ملف الايقون magnify.cur على السيرفر و كتابة عنوان اللينك الخاص به.
ثانيا : فتح ملف الجافا سكربت jguery.magnifier.js و البحث بداخله على العبارة كما فى الكود التالى، و من ثم كتابة عنوان الايقون بها و حفظها ثم رفعها على السيرفر.
cursorcss: 'url(عنوان الارتباط لملف الايقون), -moz-zoom-in',
ثالثا: داخل لوحة تحكم المدونة اختر layout و منها اختر html وفى منطقة قم بنسخ الكود التالى :
رابعا : عند قيامك بادراج صورة فى مدونتك، قم بادراج الفئة class=magnify داخل كود img الخاصة بالصورة كما فى الكود التالى
class="magnify"; style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 225px;" src="http://1.bp.blogspot.com/_MWXumvEdSuQ/Sm8MK-0oaVI/>
بالنسبة لمدونات البلوجر، لعرض الصورة بطريقة سليمة يجب حذف الكود التلقائى الذى يقوم البلوجر باضافته للتدوينة كلما قمت بادراج صورة وهذا الكود يسبق كود img مباشرة و يبدأ ب
0 comments:
إرسال تعليق