انشاء جدول في بلوجر داخل المقالات بأكواد HTML و CSS
وهناك أكثر من طريقة لتركيب الجدول بالمشاركة وذلك اما أكواد جاهزة أو من خلال بعض المواقع التى تقدم لك هذه الخدمة الرائعة مجانا.
1-هل يجوز لى انشاء جدول في بلوجر عن طريق الوورد او الاكسل ووضعه بالمشاركة داخل مدونة بلوجر؟
نعم يجوز ان تقوم بنسخ الجدول من الوورد او الاكسل ووضعهم بالمشاركة بأى مكان تريد ولكن ستواجه مشكلة وهى التضارب فى المقاسات للجدول وكذلك الخطوط المكتوب بها الجدول وتنسيقاته،لذا يفضل التالى بعد فى تركيب الجداول بالموضوعات فى مدونة بلوجر.
2-هل يمكن انشاء جدول في بلوجر عن طريق اكواد جاهزة لتركيبها مباشرة فى المشاركة وعمل الجدول؟
نعم يوجد اكواد جاهزة لهذا الأمر وسأعطيك مثال لكود جاهز ماعليك سوى نسخة ووضعة بالمشاركة بأى مكان منها وتقوم بتغيير مايلزم اذا لزم الأمر كاللون أو حجم الخط ونوعه وزيادة عدد الصفوف والأعمده اذا لزم الأمر .
احضرت لكم هذا الكود والذى سيكون ناتجه هذا الجدول الرائع … شاهد الصورة
كل ماعليك هو نسخ نموذج جدول HTML التالى ووضعه بأى مكان تريد بالمشاركة بعد تحويلها من صيغة تأليف الى HTML
الكود
<style type="text/css">table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}table{border-collapse:collapse;border-spacing:0;}.post-body table td,.post-body table caption{border:5px solid #4285f4;padding:10px;text-align:right;vertical-align:top;}.post-body table tr th{border:5px solid #4285f4;font-weight:bold;color:#fff;padding:15px 10px;text-align:right;vertical-align:top;font-size:16px}.post-body table th{background:#4285f4;}.post-body table.tr-caption-container{border:5px solid #f1f1f1;}.post-body table caption{border:none;font-style:italic;}.post-body td,.post-body th{vertical-align:top;text-align:right;font-size:13px;padding:3px 5px;}.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:left;display:inline-block;border-radius:3px}.post-body td a:hover{color:#7f9bdf;border-color:#adbce0;}.post-body tda[target="_blank"]:after {margin-right:5px;}.post-body table.tr-caption-container td{border:none;padding:8px;}.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto;}.post-body td.tr-caption{color:#666;font-size:80%;padding:0px 8px 8px!important;}table{max-width:100%;width:100%;margin:1.5em auto;}table.section-columns td.first.columns-cell{border-right:none}table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}table.columns-2 td.columns-cell{width:50%}table.columns-3 td.columns-cell{width:33.33%}table.columns-4 td.columns-cell{width:25%}table.section-columns td.columns-cell{vertical-align:top}table.tr-caption-container{padding:4px;margin-bottom:.5em}td.tr-caption{font-size:80%}</style> <br> <table cellpadding="0" cellspacing="0" style="text-align: right;"><tbody> <tr> <th>العنوان الأول</th><th>العنوان الثانى</th><th>العنوان الثالث</th> <th>العنوان الرابع</th> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> <tr> <td>وصف الجدول</td><td>وصف الجدول </td><td>وصف الجدول </td> <td>وصف الجدول </td> </tr> </tbody> </table>
3-هل هناك مواقع تمنحك نموذج جدول HTML مجانى لكى تستطيع انشاء جدول في بلوجر ؟
نعم يوجد أكثر من موقع يقدم لك هذه الخدمه المجانيه فى عمل جدول في بلوجر بطريقة احترافية،ولكن انا فضلت أن اقدم لكم موقعين رائعين حقيقة وسهل التعامل معهم وتستطيع أن تتحكم فى شكل ولون وعدد خانات الجدول وبعدها تحصل على الأكواد اللازمه بكل سهولة.
1- الموقع الأول أسمة Tables Generator ،يتميز هذا الموقع بالسهولة فى التعامل معه وسأشرح لكم كيفية عمل جدول من خلال هذا الموقع عبر مراحله حتى الحصول على الكود اللازم للجدول لوضعه بالمشاركه على مدونتك.
أولا : عند الضغط على رابط الموقع سيفتح لك واتبع أول مرحله كما بالصورة التالية
ويمكنك الاطلاع على مراحل انشاء جدول عبر مشاهدة الفيديو التالى :
شرح عمل جدول ووضعه ببلوجر from aldewaghry on Vimeo.
وسأضع لك الكود الناتج هنا وكل ماعليك هو تغيير مايلزم من اضافة صفوف أوأعمدة أو حذف صفوف أو اعمده حسب طلبك بالجدول الذى تريد انشاؤه ،ويتم كل ذلك من خلال التعديل على الكود .
الكود
<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 13px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg .tg-pity{font-weight:bold;font-size:22px;font-family:Arial, Helvetica, sans-serif !important;;border-color:#f56b00;text-align:left;vertical-align:middle} .tg .tg-2kwn{font-size:18px;font-family:Arial, Helvetica, sans-serif !important;;color:#fe0000;border-color:#f56b00;text-align:center;vertical-align:middle} </style> <table class="tg"> <tr> <th class="tg-pity">خانة واحد</th> <th class="tg-pity">خانة 2</th> <th class="tg-pity">خانة 3</th> <th class="tg-pity">خانة 4</th> <th class="tg-pity"><a href="https://www.learnwebseo.com/">خانة 5</a></th> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> <tr> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> <td class="tg-2kwn">صف</td> </tr> </table>
وستكون النتيجه كما بالصورة التالية :
وطبعا القوائم سهل جدا فهمها بعد مشاهدة الفيديو السابق ،وتستطيع صناعة جدول رائع من خلال هذا الموقع وعلى ذوقك.
ولجعل الجدول فى منتصف الصفحه ماعليك سوى استبدال الكود التالى :-
<table class="tg">
بهذا الكود
<table class="tg" style="margin:auto;text-align:center;">
2- الموقع الثانى واسمة divtable ومن خلاله تستطيع عمل الجدول فى خطوات بسيطه من خلال الاشكال الجاهزه للجدول ،ومايحتاج منك الأمر الا تعديلات بسيطه من خلال ماهو موضح بالصور التاليه .
طبعا الموقع يتميز بالسهوله والاحترافيه وبعد الانتهاء من عمل الجدول كل ماعليك هو الضغط على كلمة .Apply CSS وسيحفظ كل التغييرات التى عملتها .
ولكى تقوم بتركيب الجدول الناتج ماعليك سوى نسخ ملفات CSS والتى يظهر مكانها بالصورة التاليه
وفق الخطوات التاليه :
1- عليك التوجه للوحة تحكم مدونتك ثم المظهر وتعديل HTML
2- اضغط عبر لوحة المفاتيح أو الكيبورد على Ctrl + F ثم ابحث عن كود ]]></b:skin>
3- فوق الكود السابق ضع أكواد CSS
اما اكواد HTML فأنسخهم وضعهم بالمكان المراد وضع الجدول به بعد تحويل المشاركه الى وضعية HTML بدلا من تأليف.
اتمنى ان اكون وفقت فى الشرح
مع وافر تقديرى لك
مهندس مدنى واهوى التدوين عن #السيو للمواقع والمدونات المختلفه وتهيئتها لمحركات البحث ، وكذلك شرح ماهو السيو وماهى فائدتة لمدونات بلوجر وكذلك دروس حول بلوجر ونشر قوالب بلوجر الأجنبية والعربية وشروحات حول جوجل ادسنس .