درس تصميم إضافات بلوجر : إصنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء
السلام عليكم ورحمة الله تعالى وبركاته
أعتذر زواري وأعضائي الكرام
عن التأخير في التدوين وهذا راجع لأنني سآتي باجمل القوالب على منصة بلوجر بإذن الله
قالب احترافي بكل معنى الكلمة وبالوان هادئة وفاتحة
وباستايل انيق مريح للعين
ترقبوا هذا القالب في القريب العاجل :)
المهم أريد ان أخبركم انني اريد دعم دورة تصميم قوالب بلوجر
بدورة تصميم إضافات بلوجر بأنفسكم ليس كل الإضافات لكن المهم ما اعرفه انا
درسنا اليوم هو حول
صنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء
الكود لا يحتاج إلا للـ 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'>
بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
<td><a href='رابط,المدونة'><img src='صورة.البنر.الإعلاني' alt='أعلن معنا بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
</tr>
</table>
بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
<td><a href='رابط,المدونة'><img src='صورة.البنر.الإعلاني' alt='أعلن معنا بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
</tr>
</table>
بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
<td><a href='رابط,المدونة'><img src='صورة.البنر.الإعلاني' alt='أعلن معنا بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
</tr>
</table>
<td><a href='رابط,المدونة'><img src='صورة.البنر.الإعلاني' alt='أعلن معنا بالمدونة' title='مدونة عبد.الله.سامي.عبيد' /></a></td>
</tr>
</table>
وسيظهر بهذا الشكل بالمتصفح
الآن أصبح لدينا كود تبادل إعلاني جاهز نقوم بإضافته للبلوجر إما عبر إضافة اداة او مباشرة داخل القالب
تخصيص الكود فوق
بالأحمر رابط المدونة المعلَن لها
بالأزرق رابط الصورة
بالأخضر وصف الصورة
بالبرتقالي عنوان المدونة المعلَن لها
إلى هنا نصل غلىنهاية هذا الدرس الذي تطلب مني مجهودا جبار فأرجوا التعليق كما انني حذفت الـCapatcha
لسهولة التعليق وأي استفسار انا موجود واحب ان اذكركم انه مازل في جعبتي الكثير لكم إخواني الكرام
لإثراء المحتوى العربي من جهة منصة البلوجر
تحياتي والسلام عليكم ورحمة الله تعالى وبركاته
