أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

درس تصميم إضافات بلوجر : إصنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء


السلام عليكم ورحمة الله تعالى وبركاته

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

ترقبوا هذا القالب في القريب العاجل :)

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

درسنا اليوم هو حول

صنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء

الكود لا يحتاج إلا للـ HTML  طبعا


فل نتابع الشرح

الفكرة سهلة يتم عملها إنطلاقا من الجداول فقط

اولا نكتب كود الجول هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
الجدول مكون من أربع خلايا

للمعاينة ستظهر هكذا


أولا نبدأ بشرح الوسوم

الوسم Table : هو وسم خاص بالجداول وهو المبدأ الرئيسي للجدول يبدأ بـ <table> ثم يغلق بـ <table/>

الوسم Tr : تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي يبدأ بـ <tr> ثم يغلق بـ <tr/>

 الوسم Td : هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول يبدأ بـ <td> ثم يغلق بـ <td/>

الآن كل هاته الأشياء منطقية وباتت واضحة بالنسبة لكم  لكن لنتعمق اكثر

الـ Td كمثال هي عبارة عن مصفوفات أفقية يعني كلما أضفنا عنصر Td يضاف أفقيا للعمود الأفقي فقط
أما الـ Tr فهو عبارة عن مصفوفة عمودية يعني كلما أضفنا عنصر Td يضاف العنصر أفقيا للعمود العمودي فقط
 صممت هاته الصورة لتوضح لكم الفكرة بشكل أفضل وأكثر بساطة


بعدما لاحظت الصورة الآن اصبحت تعلم اننا إذا أردنا مثلا إضافة إعلان على اليمين او اليسار مثلا ، سنضيف حقل td
أما لو أردنا إضافة إعلان فوق او تحت ، سنضيف حقل tr

لاتنسى هاته القاعدة

حقول td داخل حقول tr داخل حقل table

أمثلة بصور للمعاينة الحية

مثال 1 : إضافة خلية أي " إعلان " على المين او اليسار بالنسبة للكود الأول فإن الكود سيكون هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
        <td>الخلية المضافة</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
للمعاينة



الخلية المضافة قمت بإحاطتها باللون الاخضر


مثال 2 : إضافة خلية أي " إعلان " فوق او تحت بالنسبة للكود الأول فإن الكود سيكون هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
      <tr>
        <td>الخلية المضافة</td>
      </tr>
    </table>
للمعاينة


الآن بعد ان عرفنا أساسيات كود التبادل الإعلاني وكيفية إضافة إعلان بالمكان الذي نريده فحان وقت التطبيق وتصميم إضافة لبلوجر

مثلا لدي هاته الصورة وهي التي سأعمل بها


لنقم الآن بإضافة وسوم أخرى ليعمل معنا الكود

وسم a وهو رابط الإعلان أي المدونة المعلن لها

بداخله المتغير href خاص باستدعاء الرابط

مثال

<a href='رابط المعلَن لها هنا'></a>

وسم img أي صورة الإعلان

بداخلها المتغيرات src و alt و title  المتغير الاول فهو خاص باستدعاء الصورة اما الثاني سيعوضها بما سنكتبه داخله في حال تلفت الصورة والثالث أي عنوان المعلن لها مثلا

مثال

<img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' />
الآن لندرج هاته الوسوم داخل الجداول لإنتاج كود تبادل إعلاني

تذكر هكذا سنعمله

اولا

<table>

ثم

<tr>

ثم

<td>

ثم

<a>

ثم

<img />

 ثم ننهي الوسوم اي هكذا

أي هكذا

    <table dir='rtl'>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>

      </tr>
    </table>
 
لكن هذا الكود فقط لإعلان واحد الآن سيكون الكود النهائي لأربع إعلانات فقط



لكن بدون صور حتى الأن فشاهد ماذا سيحدث حيث هنا تعمل خاصية المتغير alt الذي تحدث عنه سابقا
 
    <table dir='rtl'>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>

        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        </tr>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        </tr>
    </table>

 عند معاينتها على المتصفح ستظهر هكذا

أرأيت تمت كتابة الوصف الذي كتبناه داخل المتغير alt 
ملحوظة : لهذا فيجب عليك ان تضع وصفا محاكيا لما في الصورة بالمتغير alt حتى ولو في شروحاتك فهي مهمة جدا

الآن حان وقت إضافة الصورة ليصبح بالشكل الكامل

 نفس الكود اعلاه مع إضافة الصورة والروابط والوصف والعنوان فقط

    <table dir='rtl'>
      <tr>
<td><a href='http://arabetutorial.blogspot.com'><img src='http://2.bp.blogspot.com/-MdowiJBGsPA/UX-j3q2l1vI/AAAAAAAABms/oDJUk-G6coQ/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>

<td><a href='http://arabetutorial.blogspot.com'><img src='http://2.bp.blogspot.com/-MdowiJBGsPA/UX-j3q2l1vI/AAAAAAAABms/oDJUk-G6coQ/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
         </tr>
      <tr>
<td><a href='http://arabetutorial.blogspot.com'><img src='http://2.bp.blogspot.com/-MdowiJBGsPA/UX-j3q2l1vI/AAAAAAAABms/oDJUk-G6coQ/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
<td><a href='http://arabetutorial.blogspot.com'><img src='http://2.bp.blogspot.com/-MdowiJBGsPA/UX-j3q2l1vI/AAAAAAAABms/oDJUk-G6coQ/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
        </tr>
    </table>

وسيظهر بهذا الشكل بالمتصفح

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

تخصيص الكود فوق
 
بالأحمر رابط المدونة المعلَن لها

بالأزرق رابط الصورة

بالأخضر وصف الصورة

بالبرتقالي عنوان المدونة المعلَن لها

إلى هنا نصل غلىنهاية هذا الدرس الذي تطلب مني مجهودا جبار فأرجوا التعليق كما انني حذفت الـCapatcha
لسهولة التعليق وأي استفسار انا موجود واحب ان اذكركم انه مازل في جعبتي الكثير لكم إخواني الكرام
لإثراء المحتوى العربي من جهة منصة البلوجر

تحياتي والسلام عليكم ورحمة الله تعالى وبركاته








 

آخر مقالات المدونة

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

  1. يسعدنى أن تكون من زوار مدونتى أساحبى كوميكس
    www.asa7becomecs.blogspot.com

    ردحذف
  2. شكرا على مرروك لكن دخلت ووجدت مدونتك غير مرتبة نوعا ما لم أفهم فيها شيء آسف اخي

    ردحذف
  3. رائع جداً كنت أريد درس تعلمي مثل هذا فأنت قمت بشرح الأكواد

    ردحذف
  4. العفو اخي ونتظر متابعتك لبقاي الدرورس القادمة إن شاء الله تحياتي الخالصة :)

    ردحذف
  5. http://sisgiza.blogspot.com

    للتواصل على

    http://sisgiza.blogspot.com/2013/06/ad-here.html

    ردحذف
  6. (p)جزاك الله خيرا واصل هكذا بارك الله فيك

    ردحذف
  7. شكرا على مروركم الطيب :)

    ردحذف
  8. استفدت بشرحك كثيرا.. ما رأيك بمدونتى
    http://sharmkhleej.blogspot.com/

    ردحذف
  9. جميلة جدا اخي واهتم كثيرا بالمحتوى لكسب وزار مهتمين أكثر :)

    ردحذف
  10. اصنعه علي ايه الكود فيجوال بيسك ولا ايه

    ردحذف
  11. شكرااااااااااااااا لك اخي (h)

    ردحذف
  12. ساعدني ولك الجزاء من عند الله
    مؤخرا قمت بتطبيق أحد القوالب الخاصة بك
    ولكن واجهت مشكلة
    في أسفل كل تدوين
    أجد اسمك ومعلوماتك
    كيف أعدل هدا
    أدخل الى مدونتي وادخل الى تدوينا ما ولاحظ المشكل

    أرجو الرد بسرعة جزاك الله خيرا
    هدا رابط مدونتي
    http://the4-as.blogspot.com/

    ردحذف
  13. السلام عليكم أخي الكريم
    ماعليك إلا الدخول إلى القالب عبر
    template > Edit Html
    ثم إضغط داخل صفحة التعديل بكليك ماوس ثم Ctrl+F
    وابحث عن إسمي الكامل وغيره وستجد قربها النبذة غيرها بما يناسبك وبالتوفيق لك أخي.

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

    ردحذف
  15. إذا ماعليك إلا البحث عن
    'postauthor'
    أو
    "postauthor"
    وستحد كل تلك المعلومات أسفلها
    أو
    أجعلني مشرفا أعمل التعديل على تلك الإضافة بمايناسبك بعدها ازل عني الإشراف

    ردحذف
  16. جزالك الله خيرا لكن أحتاج ربما بريدك الالكتروني
    تأكد بان الله سيجازيك عن هدا العمل

    ردحذف
  17. آمين يارب والإيميل هو
    alwanarabe@gmail.com

    ردحذف
  18. يا أخي الفاظل أنا في انتظار طلبي جزاك الله خيرا

    ردحذف
  19. http://th3actoute.blogspot.com/

    ردحذف
  20. شكرا
    مدونة لك مجاني
    http://www.1bestonline.com/

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن