السلام عليكم ورحمة الله تعالى وبركاته
أعتذر زواري وأعضائي الكرام
عن التأخير في التدوين وهذا راجع لأنني سآتي باجمل القوالب على منصة بلوجر بإذن الله
قالب احترافي بكل معنى الكلمة وبالوان هادئة وفاتحة
وباستايل انيق مريح للعين
ترقبوا هذا القالب في القريب العاجل :)
المهم أريد ان أخبركم انني اريد دعم دورة تصميم قوالب بلوجر
بدورة تصميم إضافات بلوجر بأنفسكم ليس كل الإضافات لكن المهم ما اعرفه انا
درسنا اليوم هو حول
صنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء
الكود لا يحتاج إلا للـ 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
</tr>
<tr><td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
</tr>
</table>
وسيظهر بهذا الشكل بالمتصفح
الآن أصبح لدينا كود تبادل إعلاني جاهز نقوم بإضافته للبلوجر إما عبر إضافة اداة او مباشرة داخل القالب
تخصيص الكود فوق
بالأحمر رابط المدونة المعلَن لها
بالأزرق رابط الصورة
بالأخضر وصف الصورة
بالبرتقالي عنوان المدونة المعلَن لها
إلى هنا نصل غلىنهاية هذا الدرس الذي تطلب مني مجهودا جبار فأرجوا التعليق كما انني حذفت الـCapatcha
لسهولة التعليق وأي استفسار انا موجود واحب ان اذكركم انه مازل في جعبتي الكثير لكم إخواني الكرام
لإثراء المحتوى العربي من جهة منصة البلوجر
تحياتي والسلام عليكم ورحمة الله تعالى وبركاته
شكرا على مرروك لكن دخلت ووجدت مدونتك غير مرتبة نوعا ما لم أفهم فيها شيء آسف اخي
ردحذفرائع جداً كنت أريد درس تعلمي مثل هذا فأنت قمت بشرح الأكواد
ردحذفالعفو اخي ونتظر متابعتك لبقاي الدرورس القادمة إن شاء الله تحياتي الخالصة :)
ردحذفhttp://sisgiza.blogspot.com
ردحذفللتواصل على
http://sisgiza.blogspot.com/2013/06/ad-here.html
(p)جزاك الله خيرا واصل هكذا بارك الله فيك
ردحذفشكرا على مروركم الطيب :)
ردحذفاستفدت بشرحك كثيرا.. ما رأيك بمدونتى
ردحذفhttp://sharmkhleej.blogspot.com/
جميلة جدا اخي واهتم كثيرا بالمحتوى لكسب وزار مهتمين أكثر :)
ردحذفاصنعه علي ايه الكود فيجوال بيسك ولا ايه
ردحذفشكرااااااااااااااا لك اخي (h)
ردحذفساعدني ولك الجزاء من عند الله
ردحذفمؤخرا قمت بتطبيق أحد القوالب الخاصة بك
ولكن واجهت مشكلة
في أسفل كل تدوين
أجد اسمك ومعلوماتك
كيف أعدل هدا
أدخل الى مدونتي وادخل الى تدوينا ما ولاحظ المشكل
أرجو الرد بسرعة جزاك الله خيرا
هدا رابط مدونتي
http://the4-as.blogspot.com/
السلام عليكم أخي الكريم
ردحذفماعليك إلا الدخول إلى القالب عبر
template > Edit Html
ثم إضغط داخل صفحة التعديل بكليك ماوس ثم Ctrl+F
وابحث عن إسمي الكامل وغيره وستجد قربها النبذة غيرها بما يناسبك وبالتوفيق لك أخي.
اسمح لي يا أخي المحترم ان قلت لك بأني بحت ولم أجد سوى اسمك الكريم
ردحذفغيرته فما ظهر اسمي في المدونة
بالاظافة الى أني لم أجد تلك المعلومات الخاصة بك كي اعيرها
أرجوك أخي ساعدني
إذا ماعليك إلا البحث عن
ردحذف'postauthor'
أو
"postauthor"
وستحد كل تلك المعلومات أسفلها
أو
أجعلني مشرفا أعمل التعديل على تلك الإضافة بمايناسبك بعدها ازل عني الإشراف
جزالك الله خيرا لكن أحتاج ربما بريدك الالكتروني
ردحذفتأكد بان الله سيجازيك عن هدا العمل
آمين يارب والإيميل هو
ردحذفalwanarabe@gmail.com
يا أخي الفاظل أنا في انتظار طلبي جزاك الله خيرا
ردحذفhttp://th3actoute.blogspot.com/
ردحذفشكرا
ردحذفمدونة لك مجاني
http://www.1bestonline.com/