طريقة إنشاء الجداول على مدونات بلوجر

عدد مشاهدات الموضوع:
 السلام عليكم ورحمة الله تعالى وبركاته ، كما نعلم جميعا أن ومحرر الرسائل بلوجر سواء القديم أو الجديد لا يتوفر على أداة لإنشاء الجداول , ،فأحيانا نرغب بإنشاء جدول داخل موضوع معين وذلك مثلا لشرح بعض الإحصائيات ،أو ترتيب بعض المواضيع والعديد من الأشياء التي من الممكن إستغلالها لهذا الغرض ،في هذه الفقرة نسوف نقوم بمعرفة كيفية إنشاء الجداول على مدونات بلوجر ،حيث سوف نقوم بإدخال عليها بعض التحسينات من حيث الشكل والتأثيرات .
هذا مثال للجدول :
الترتيب الموضوع التصنيف عدد التعليقات عدد المشاهدة
ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات
1 إضافة خاصية إقرأ المزيد إضافات بلوجر 30 245
2 إدراج إعلانات أدسنس إضافات بلوجر 25 230
3 كيفية إنشاء منتدى دروس بلوجر 21 190
4 فهرسة مواضيع المدونة دروس بلوجر 19 187
5 أزرار المفضلات الاجتماعية أزرار 11 95

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ثم قم بالبحث عن هذا الكود :
]]></b:skin>
ثم قم بلصق الكود التالي قبله :
#tableau {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
    text-align: right;
    border-collapse: collapse;
}
#tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#tableau td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/s1600/gradback.png') repeat-x;
}
#tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
#tableau tbody tr:hover td {
    background: #d0dafd url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png') repeat-x;
    color: #339;
}
#tableau a:hover {
    text-decoration:underline;
}
وهذا الكود هو المسؤول عن الألوان وتأثيرات تمرير الماوس على الجدول  :
والآن وعند كتابتك لموضوع معين تريد إضافة الجدول,  نلصق هذا الكود من تحرير Html للرسالة حيث يمثل هذا الكود ،جدولا يتألف من 5 خانات عمودية و7 خانات أفقية ،وهو الجدول الذي قمنا بإنشائه في المثال أول الموضوع وسوف أقوم بشرح كيفية إضافة كل خانة على حدى لتلائم المعطيات المراد ادراجها في الجدول.
<table id="tableau" summary="ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات">
  <thead>
    <tr>
      <th scope="col">الترتيب</th>
      <th scope="col">الموضوع</th>
      <th scope="col">التصنيف</th>
      <th scope="col">عدد التعليقات</th>
      <th scope="col">عدد المشاهدة </th>
          </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>إضافة خاصية إقرأ المزيد</td>
      <td>إضافات بلوجر</td>
      <td>30</td>
      <td>245</td>
    </tr>
    <tr>
      <td>2</td>
      <td>إدراج إعلانات أدسنس</td>
      <td>إضافات بلوجر</td>
      <td>25</td>
      <td>230</td>
    </tr>
    <tr>
      <td>3</td>
      <td>كيفية إنشاء منتدى</td>
      <td>دروس بلوجر</td>
      <td>21</td>
      <td>190</td>
    </tr>
    <tr>
      <td>4</td>
      <td>فهرسة مواضيع المدونة</td>
      <td>دروس بلوجر</td>
      <td>19</td>
      <td>187</td>
    </tr>
    <tr>
      <td>5</td>
      <td>أزرار المفضلات الاجتماعية</td>
      <td>أزرار</td>
      <td>11</td>
      <td>95</td>
    </tr>
  </tbody>
</table>
لإضافة أو حذف الخانات الأفقية الموجودة في السطر الأول (الترتيب،الموضوع،التصنيف..) نقوم بالتعديل على الكود المحصور بين الوسمين  thead و thead /  
وذلك بحذف أو إضافة  الكود ذي اللون الأزرق من بين الأكواد المحصورة بينهما مع تغيير كلمة " الترتيب" بالكلمة التي تريد .

  <thead>
    <tr>
      <th scope="col">الترتيب</th>
   </tr>
  </thead>
 ولإضافة الأسطر الأفقية (1،إضافة خاصية إقرأ المزيد،إضافات بلوجر...) نقوم بتحديد  الوسم .
<tbody>
نقوم بإضافة هذا الكود تحته , حيث يمثل هذا الكود الخانات الأفقية من اليمين إلى اليسار
<tr>
      <td>1</td>
      <td>إضافة خاصية إقرأ المزيد</td>
      <td>إضافات بلوجر</td>
      <td>30</td>
      <td>245</td>
    </tr>
 ولزيادة عدد الخانات الأفقية ،نقوم بزيادة الكود دي الخلفية الصفراء تحته مباشرة بعدد المرات التي نريد فيها إضافة الخانات مع تبديل العدد 245 بالكلمة التي تريد .

ولتبديل عنوان الجدول ،والموجود في أسفله نقوم بتحديد هذا الكود وتغيير ما لون بالأزرق
<td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>
 حيث يتم حساب عرض العنوان بطريقة تلقائية وهو يساوي عدد الخانات العمودية ,حيث يمثل العدد" 5" عدد الخانات العمودية في هذا المثال ويجب تعديله بالعدد المطلوب حسب الجدول الدي تريد إنشاءه.

  • وهذه الصورة توضح تنسيق الجدول مع الكود ,إضغط على الصورة لتكبيرها 

مع الشكر الجزيل للأخ سفيان

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

  1. غير معرف7:31 م

    مشكور أخي الكريم على الموضوع الرائع ،في إنتظار دائما الجديد

    ردحذف
  2. غير معرف7:51 م

    طريقة طويلة جدا نريد محررا متطورا شكرا على أي حال

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

    ردحذف
  4. أبو إياد مشكور على الموضوع الجميل

    أبو إياد ممكن نسوي تبادل إعلاني

    هذي مدونتي شوفها وقيمها..

    مدونة دنيا الإبداع
    http://ab-av.blogspot.com/

    وإذا موافق على التبادل

    ضيفني لاني والله إني ماادخل على التعليقات حقتك
    اووك

    abu_alwalid_55@hotmail.com

    والحمد لله مدوونتي ماتشمل أشياء محرمة ولله الحمد..

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

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

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

    ردحذف
  7. شكرا . و لكن يا ريت تعيد الموضوع مع صور لتوضيح و شكرا

    ردحذف
  8. @noujoum
    السلام عليكم ،لقد قمت بإضافة صورة توضيحية في أسفل الموضوع إنشاء الله سوف تفيدك لفهم الموضوع بالتوفيق

    ردحذف
  9. غير معرف12:06 م

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

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

    ردحذف
  10. تدوينة جميلة ورائعة استاذ أبو اياد .. استفدتُ منها..
    شكرا لك..
    وداوم على هذا النجاح..

    ردحذف
  11. غير معرف9:25 م

    جزاكم الله خيرا على مجهودكم
    لم افهم معظم الشرح للاسف فالشرح صعب على المبتدئين
    لكن هل يمكنكم مساعدتي ؟؟؟
    عندي سؤال فيما يخص انشاء الجداول بواسطة محرر
    windows live writer
    عندما اضع الجدول وانشره تظهر لي الرسالة التالية في اعلى محرر الرسائل:

    ''لا يمكن قبول HTML خاصتك: Closing tag has no matching opening tag: A

    ارجو مساعدتي وجزاكم الله خيرا
    ملاحظة اعرف ان الدخول باسم مجهول غير مرغوب فيه ولكني ادخل به لاسباب خاصة بي
    وذلك مؤقتا فقط واعتبر ان الاجابة على سؤالي هو افادة لغيري ايضا وليست مقتصرة على السائل فقط
    بارك الله فيكم

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

    ردحذف
  13. b-(
    ممتاااااااااااز
    ماشاءالله تبارك الله
    ويحتاج لـ أيدي محترفه كيدك الكريمه
    بارك الله فيك ومتعك الله بالصحه والعافيه

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

    جارى التجربه والاستفاده

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

    وهذا مثال على ذلك
    http://www.way2allah.com/modules.php?name=Khotab&op=Vedio
    وشكرا

    ردحذف
  16. بارك الله فيك وشكر لك جهدك

    ردحذف
  17. شكرا لك على التدوينة القيمة ,,,

    ردحذف
  18. شكراََ أخوي على هذا الشرح الرائع

    ردحذف
  19. والله مشاء الله عليك والله ادور طريقة كيف اظبط الجدول والحمدلله اخير جزاك الله اخي الكريم علي المجهود الرائع

    ردحذف
  20. شكرا لك على المجهود

    ردحذف
  21. بارك الله فيك

    ردحذف
  22. جميل لكن في مرة يجب ان يتكرر نفس الشيء
    بعني ان العمل تقليدي صح ؟

    ردحذف
  23. أرجوك أريد كيفية وضع رابط عند كل صف أفقي
    مثال :
    ----------------------------------
    تحميل دروس الرياضيات
    ----------------------------------
    تحميل دروس الفيزياء
    ----------------------------------
    تحميل دروس العلوم
    ----------------------------------
    تحميل دروس الاجتماعيت
    ----------------------------------

    مربوطة برابط

    ردحذف
  24. شكرا هل من الممكن ان اغير الوان الجدول

    ردحذف

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

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