إبحث في موسوعة التدوين

كيفية عرض الصورة بحجمها الطبيعي في مدونتك باستخدام كود الجافا


إن من الميزات الرائعة في مدونات البلوجر أنها تمنح مدونيها القدرة على الوصول إلى كود الـ HTML الخاص بالمدونة وتحريرها وإضافة التعديلات التي يرغب بها, مما يكسبها مظهراً أكثر إحترافية ويلبي احتياجات المدونين. وإستكمالاً لما كتبته سابقاً من مقالات حول كيفية وضع بعض الأكواد لمدونتك -راجع قسم الكود- سأشرح اليوم كيفية وضع كود جافا Java Script يقوم بعرض وتكبير صور مدونتك في نفس الصفحة وبمظهر جميل. فلن تواجه بعد اليوم العقبات المعتادة عندما ترغب في عرض الصور بحجمها الطبيعي وذات الأبعاد الكبيرة بحيث تخرج أطرافها من المساحة المخصصة للنشر. ولن يضطر زوار مدونتك إلى الرجوع للخلف كلما أرادوا تكبير الصورة لمشاهدتها بوضوح.


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


الصورة الأولى




الصورة الثانية





كما تلاحظ ... فإن الصورة الثانية تظهر في نفس الصفحة وبحجمها الطبيعي بطريقة أكثر إحترافية .. ولو أنني جعلت الصورة الثانية تظهر بحجمها الطبيعي فإن أطرافها ستخرج من المساحة المخصصة لظهور نص المقالة. وستعطي إنطباعاً لدى زوارك بأنها مدونة هواة أكثر من كونها مدونة احترافية.


قمت برفع الصورة التالية بعرضها الطبيعي لملاحظة الخطأ الذي يقع به المدونون... لاحظ خروج الجانب الأيسر من الصورة.




كما أن لهذا الكود فائدة أخرى لأصحاب المدونات الذين يعرضون الكثير من الصور في الصفحة الواحدة مما يؤدي إلى بطئ عرض مدوناتهم. فتخيل أنك تريد وضع 20 خلفية لويندوز في مقالة لك على مدونتك, فإن هذه الصور ستبطئ من سرعة متصفح زوارك. وهو ما يعتبر من مساوئ التدوين.


لوضع هذا الكود في مدونتك اذهب إلى تصميم > تحرير HTML واختر توسيع قوالب عناصر واجهة المستخدم ثم ابحث عن الأمر التالي





ثم أضف الأوامر الثلاث التالية قبل الكود السابق مباشرة




وستكون بالشكل التالي




بعد إضافة الكود اختر حفظ القالب. واكتب مقالة جديدة وضع بها بعض الصور ثم شاهدها في مدونتك.

هناك 8 تعليقات:

  1. موضوعك جميل ونفذتة بالفعل ... أنا متأكدة إن كل من دخل مدونك وموضوعك هذا نفذة .. لكنى أستغرب من عدم الشكر .. شكراً جزيلا لعلمك ومجهودك وٍسامر على جميع موضوعاتك إن شاء الله وأنا متأكدة من الإستفادة مسبقاً

    ردحذف
  2. @سوسن

    شكراً لكِ على هذه الكلمات الصادقة والني تدفعني لبذل المزيد من الجهد

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

    ردحذف
  4. http://blogcash4arab.blogspot.com/2011/01/blog-post_17.html

    ردحذف
  5. بارك الله فيك دائما في تقدم

    ردحذف
  6. جزاك الله كل خير

    ردحذف

نتشارك المعرفة والخبرات مع المدونين العرب ... أترك تعليقك ورأيك دعماً منك لنا.