إضافة جدول مدونة بلوجر. كثير من المدونين في بلوجر يرغبون في إضافة جدول لمدونة بلوجر ولكن ليس هذا الإضافة موجود في بلوجر فإذا كنت من هذا الصنف فأنت في المكان المناسب للتعلم كيف تضيف الجدول لمدونتك.
كيف تصصم جدول داخل منشوارتك
تصميم الجدول داخل منشوارتك ومقالاتك له أهمية كبيرة لأنه يظهر موقعك بشكل جذاب وجميل ويوضح المعلومة لزائر موقعك فوجود الجدول داخل مدونتك يحسن مقالتك بشكل كبيرة فإذا أردت أن تقوم تشرح حاجة مهمة تحتاج إلى جدول في شرحك.
فإذا أردت مثلا تنشر مراجعة لجوال أو كمبيوتر ستحتاج إلى هذا الجدول لأجل تضيف المواصفات بشكل جميل ومرتب ومشوق للزائر أن يقرأ مقالك ويفهمه.
فإذا كنت قدرأيت في مدونة جدوال مميزة ولكن. لا تعرف كيف تضيف هذه الجداول في مدونتك وتواجه مشكلة لإن هذاه الإضافة لا توفرها بلوجر
فحل هذه المشكلة سهل جدا لأن بلوجر تعمل بلغة HTML ولغة HTML هي لغة سلسة إذا فهمتها تقدر تعرف أي شيء فليس هناك شيء صعب.
فقط تحتاج متابعة الشرح معي أنا لا أشغلك بأكواد برمجية سأقوم بتسهيل لك الأمور وأعطيك أشياء جاهزة.كيفية إضافة جدول لمدونة بلوجر
توجد طرق كثيرة لإضافة جدول لمدونة وسأبدأ بشرح الطريقة السهلة وهي الأفضل.
طريقة إضافة جدول لمدونة بلوجر والتي تعد عندي أفضل طريق لك إذا كنت مبتدأ.
أتيتك بكودين لعمل جدول داخل مدونة بلوجر الكود الأول هو كود css تقوم بإضافته للقالب.
ما هو عمل كود css
هذا الكود css على تحسين الجدول وتلوين حتى يظهر بشكل احترافي فهذا الكود يعتني بالمظهر وهو يقوم بإظهار الجدول في مدونة بلوجر بشكل ممتاز وهذا الكود تقوم إضافته مرة واحدة في القالب.
ما هو المكان المناسب لإضافة كود css
id4 يمكنك إضافة كود جدول css في موضعين الموضع الأول تقوم بفتح المظهر والبحث عن كلمةثم تقوم بلصق كود css الخاص بالجدول فوقها مباشرة
انسخ كود css من هنا
/* material box design by TI9NIYA ARABIC */
.tikniyabox{background:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.tikniyabox h2 {background:#ff0000;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;right:30px;text-transform:uppercase}
.tikniyabox.box-yellow h2{background:#e2c601}
.tikniyabox.box-blue h2{background:#2ad2c9}
.tikniyabox.box-red h2{background:#f7176a}
/* table info */
.Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
.Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
.Blog table.tr-caption-container tr:nth-child(2n+1) td, .Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
.Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
.Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
.Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-right:0;font-family:Noto Sans;font-size:13px}
.Blog table th:last-child, .Blog table tr td:last-child, .Blog table tr:nth-child(2n) td:last-child{border-left:0}
.Blog table td{padding:15px 20px;border:1px solid #ddd;border-right:0;border-top:0;vertical-align:middle}
.Blog table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
الطريقة الثانية تدخل من التخصيص وتدخل الإعدادات وتضيفها داخل مربع css وهذه الطريقة ستفهمها لما تشاهد الفيديو.
الكود الثاني هو كود HTML
هذا الكود الخاص بالجدول وهذا الكود تحتاجه دائما كلما أردت أن تضيف جدول لمدونة بلوجر دخل المقالات ويمكنك التعديل عليه حسب رغبتك تغيير الكتابة دخل الصفوف وزيادة الصفوف والأعمدة وحذفها حسب رغبتك.
طريقة إضافة الجدول HTML
تفتح مشاركة جديدة وتضغط مكان القلم لأجل تظهر لك لك أكواد HTML ثم تقوم بوضع كود الجدول في المكان المناسب لها تم تقوم بتعديل الكتابة داخل الكود وتخصصها حساب طلبك.
الكود الثاني المطلوب هو كود HTML قم بسخه من هنا ثم استخدمة في منشوراتك
<div class="tikniyabox">
<h2> هنا قم بالتغيير الى ما تريده : </h2>
<table cellpadding="0" cellspacing="0" style="text-align: rghit;">
<tbody>
<tr><td><b> هنا قم بالتغيير الى ما تريده : </b></td> <td> هنا قم بالتغيير الى ما تريده</td></tr>
<tr><td><b> هنا قم بالتغيير الى ما تريده : </b></td> <td>هنا قم بالتغيير الى ما تريده</td></tr>
<tr><td><b> هنا قم بالتغيير الى ما تريده : </b></td><td> هنا قم بالتغيير الى ما تريده </td></tr>
<tr><td><b> هنا قم بالتغيير الى ما تريده : </b></td> <td> 2022 </td></tr>
<tr><td><b>اهنا قم بالتغيير الى ما تريده : </b></td> <td> هنا قم بالتغيير الى ما تريده </td></tr>
<tr><td><b>هنا قم بالتغيير الى ما تريده - : </b></td> <td> هنا قم بالتغيير الى ما تريده </td></tr>
</tbody>
</table>
</div>
لتحميل الأكواد بملف txtاضغط هنا
يمكنك ايضا تنزيل هذا الشكل الثاني من الجدول ثم اختار المناسب لك لكن لا تخلط بين أكواد الملف الأول والملف الثاني استخدم كل ملف في مدونة والذي سيناسبك استمر عليه
الطريقة الثانية لعمل جدول داخل بلوجر عن طريق موقع
يمكنك عمل جدول من هذا الموقع ففي هذا الموقعTablesGenerator.com
يتوفر فية الألوان والأعمدة الصفوف حسب رغبتك تقوم تعديلها بكل سهولة ثم تقوم باختيار HTML وسيظهر العمل الذي قمت به على شكل كود.
تقوم بنسخ الكود وتفتح مشاركة جديدة وتفتح الأكواد الخاصة ب HTML وتضع الجدول في المكان المناسب.
الطريقة الثالثة لعمل الجدول
تقو بفتح برنامج وورد أو كسل وتفوم بكتابة التنسيق بشكل يدوي وتعمل الأعمدة والصفوف حسب رغبتك وتقوم نسخ التنسيق ثم تتوجه الى هذا الموقع.
tableizer.journalistopia.comوتقوم بلصق التنسيق داخل المربع في الموقع ثم تضغط تحت وسيقوم الموم التحويل التنسيق إلى أكواد HTML ثم قم بنسخها وإضافتها في مشاركاتك في أكواد HTML.
كيفية عمل جدول المحتويات
بعد أن انتهينا من عمل الجدول المكون من صفوف وأعمدة أحببت أن علمكم كيف تعملوا جدول المحتويات.
جدول المحتويات هو جدول يقوم بجمع العناوين الخاص بك العناوين الرئيسية الفرعية والثانوية في مكان واحد يجدها الزائر مجتمعة يمكنه الضغط على العنوان وسيتم نقله إلى الجزء الذي يريده من المقال.
خطوات عمل جدول المحتويات
عمل جدول المحتويات هي خطوات بسيطة سأعلمك كيف تعملها بدون اكواد ولا برامج ولا يمكنك عملها بطريقة يدوية وبسيطة وإليك بيانها كالتالي- قم بنسخ العناوين الموجودة في مقالتك واضافتها رأس الصفحة تحت عنوان جدول الموضوعات
- قم بتخصيص رابط المقال باسم محدد
- قم بفتح أكواد HTML والذهاب إلى كل عناوبن في المقال وإضافة جنبها كلمة
"id="1
"id="2
"id="3
- أضيف هذا بعد الرموز العناوين المقفولة مثلا بعد </h2>
وبعد </h3>
بعد كل هذه الرموز الخاصة بالعناوين نضيف مباشرة id1 id2 id3 حتى نكمل العناوين
- ثم نعود إلى رأس الصفحة إلى العناوين التي قمنا بجمعها وننسخ رابط المقالة ونعمل للعناوين ارتباط ثم نضيف آخر الرابط #1. #2. #3 وهكذا حتى نكمل العناوين
مثال عملي سأقوم بجمع عناوين هذا المقالة هنا لأجل تفهم فقط لكن أنت تضيفها رأس الصفحة
شكرا على تعليقك