كيفية إنشاء معرض للصور على مدونات بلوجر

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

  • المرحلة الأولى:
في هذه المرحلة يجب تحديد روابط الصور التي سوف نقوم بإدراجها ضمن معرض الصوروذلك بإضافة كل رابط في هذا الكود لنستعمله في المرحلة الثانية.
<A HREF="رابط الصورة" target="_blank" title="إضغط لتكبير الصورة" >
<IMG HEIGHT=50 WIDTH=50 SRC="رابط الصورة" alt="إسم الصورة" /></A>
 نقوم بتغيير مالون باللون الأحمر برابط الصورة وما لون باللون الأزرق بإسم الصورة وما لون باللون الوردي بقياسات طول وعرض الصورة.
 ملاحظة : يمكنك إستعمال محرر النصوص wordpad لتسهيل عميلية النسخ واللصق
  • المرحلة الثانية :
في هذه المرحلة سوف نقوم بعملية إدراج الكود السابق(الأكواد التي تضم جميع الصور) في الكود المخصص لإنشاء الجدول ،فالأمر بسيط جدا ما عليك سوى التركيز قليلا عند إدراج الأكواد .حيث نقوم بإدراج كل كود(الكود السابق) بين  <TD> و </TD> ليس العكس .
على سبيل المثال ،إذا أردنا إنشاء جدول يضم سطرا واحدا و4 خانات نستعمل هذا الكود.
<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>
وتكون النتيجة على هذا الشكل : 

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة
يمكنك إضافة خانات أخرى في نفس السطر ذلك بإضافة الوسمين  <TD> </TD> قبل </TR>  مع إضافة الكود الأول الذي يضم الصورة بين الوسمين ذي اللون الأخضر.
والآن لإضافة سطر تاني يضم نفس عدد الخانات وهو العدد 4 كما في المثال السابق نقوم بإضافة جميع الأوسمة الموجودة بين <TABLE> و </TABLE>  بعد الوسم  </TR> ليصبح الكود على هذا الشكل .
<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR></TABLE>
وكما تلاحظ أن الوسم <TR> و</TR>  هما المسؤولان عن عمل أسطر أفقية
لتكون النتيجة على هذا الشكل :

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة

 إسم الصورة
وبإتباع نفس الطريقة لإنشاء معرض للصور يضم العدد الذي تريد من الصور

 أما لإضافة عنوان لمعرض الصور ،قم بإضافة هذا السطر بعد الوسم <TABLE> مع إدخال العنوان في المكان المحدد
<caption>ضع العنوان هنا</caption>
ولإضافة إطارات للصور نقوم بإضافة هذا السطر داخل الوسم  <TABLE> ليصبح على هذا الشكل
 <TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">
ولأي إستفسار المرجوا ترك تعليقاتكم أسفل الموضوع.

هناك 26 تعليقًا:

  1. الشكر موصول لك أبو إياد على الشرح المميز

    ردحذف
  2. موضوع جميل فعلا .. ففن الصور وطريقة عرضها جميلة جدا .. تحياتي لك

    ردحذف
  3. تشكرون على إعجابكم بالموضوع ،وكذلك تتبعكم للمدونة ،تحياتي للجميع

    ردحذف
  4. السلام عليكم ورحمة الله وبركاته

    شكرا أخي أبو إياد على طريقة عرض الصور والشرح الوافي
    جزاك الله كل خير

    ردحذف
  5. عمرو12:35 ص

    جزاك الله كل خير ياا ابو ايااد موضوع جميل

    ردحذف
  6. غير معرف2:42 م

    دائما مبدع

    damas55555

    ردحذف
  7. موضوع جميل يا ابو اياد


    مشكوووووووووووور

    ردحذف
  8. يا فرج الله اخيرا طبقت الموضوع صح
    الحمد لله
    قولى اخى ابو اياد لو عايزة مثلا الصورة تبقى مرتبطة بلينك يعنى اللى يضغطت على الصورة يروح على صفحة ويب
    اعمل ايه ؟؟؟؟؟؟؟؟؟؟؟؟؟؟

    ردحذف
  9. @sara fahmy
    الحمد لله أختي لأنك وفقِت في تطبيق الخاصية ،فالأمر يحتاج سوى القليل من التركيز،المهم بالنسبة لوضع لينك للصورة ،توجهى للكود الأول فسوف تلاحظين أنني ذكرت إدخال رابط الصورة مرتين ،فقومي بإدخال لينك الذي تريدين التوجه إليه عند الضغط على الصورة في"الرابط الأول" بالتوفيق

    ردحذف
  10. فكرة متميزة لإثراء مدونات بلوجر بالصور
    مع تحياتي

    ردحذف
  11. @Sonnet
    شكرا لك وتحية طيبة لك وأتمنى أن ينال الموضوع إعجابك بصفة خاصة والمدونة بصفة عامة

    ردحذف
  12. رائع يا ابو اياد بس لو تقلي كيف اعمل رابط للصورة لكي اضعة في اكواد الاعلانات التي تعطيها لنا
    يبقي جازاك الله خيرا
    اشكرك

    ردحذف
  13. http://hanyforfurniture.blogspot.com/
    دة رابط مدونتي ياريت تتفضل وتزورها

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

    ردحذف
  15. ولو حوالي 300 صوره اعملها تلقائي ازاي ؟؟ وبالعلم انهم موجود ف بياكسا

    ردحذف
  16. غير معرف5:57 م

    سلام عليكم
    كيف عمل جدوال يعرض مجموعه صور عند النقر علر ربط في القائمه المنسدله اسم صور في بلوجر
    وشكر

    ردحذف
  17. لك جزيل الشكر على طــرحك تمنياتي لك بمزيد من التقدم والتوفيق بإنتظار جديدك

    ردحذف
  18. طلب تعديل قالب blogger tube معدل ... لخبراء تصميم القوالب فقط
    السلام عليكم ورحمة الله وبركاتة

    اخواني الكرام

    حصلت اليوم علي هذا القالب الرائع
    ولكن المشكلة انة لا يدعم الا اليوتيوب وانا ارفع فيديوهاتي علي موقع Videobb
    حاولت اللعب في التصميم وتغيير اللينكات واكواد العرض وقد افلحت جزئيا في عرض مشغل الفيديو كافتراضي ولكن عند التشغيل لا يلتقط الفيديو ويخبرني بأن الرابط غير صحيح

    هذا رابط القالب
    http://www.shortz.tk/YouTube-Blogger-Template.html

    رابط الشرح للقالب
    http://www.dantearaujo.net/2009/09/b...-template.html

    رابط مدونة تستخدم هذا القالب
    http://adil-imam-film.blogspot.com/

    وشكرا مقدما علي المساعدة

    ردحذف
  19. بارك الله فيك أخي أبو إياد
    لدي سؤال: كيف يمكنني تنقيص المسافة التي بين الصور؟ لأجعلها مثلا 2 ملم فقط.

    ردحذف
  20. جزاكم الله خيرا
    كيف اجعل أول مشاركة في مدونتي تكون ثابتة في البدايه -يعني لما افتح المدونة تكون المشاركات الظاهرة من الأقدم إلى الأحدث-اتمنى انك فهمت مشكلتي وارجوالرد .

    ردحذف
  21. سلام هالتطبيق فين غادي نحطه راه حاولت بزااف ومبغاش يتطبق وثانكيوهات على المعلومات

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية