إنشاء الجداول على مدونات بلوجر

---

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



انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML
ثم قم بالبحث عن هذا الكود :

كود:

]]></b:skin>

ثم قم بلصق الكود التالي قبله :

كود:

#tableau {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 10px 0;
*****: 100%;
****-align: right;
border-collapse: collapse;
}
#tableau th {
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikRl6ji7VMMuJV0x_R-81OkoHxWOypeWf4oi8HG3jms1EXDV5UY31G0kP3CShA6H_jHKfDeUz13xiBms8jiLFRS0171LumWkIFe2CTmgULOqEb-COBBG3LFjosIE3enZdzY0bl2JkPn9W3/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNZ_G7-4dh2cZiooD2c-0gtnGn3jl23fokiEPe4lVI1TQTrMNXYnRZMMfUMr5yoZpf1DkS4B_l6XRIpmuf-GOACT0vryf-jzhdGLVN9mlETVjK1nB5P_TQZVEhvF1YiyQpVOA447mLEP9/s1600/gradback.png') repeat-x;
}
#tableau tfoot tr td {
background: #e8edff;
font-size: 16px;
color: #99c;
****-align:center;
}
#tableau t**** tr:hover td {
background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVLiy_vpwd3OUo7D2lp4WLTiMTVkIrGVO5m68-ygwBRQLKXn6MRZ1qy1oER6XSoqhnKdO8bwOV8wnpBZf_Oc78NFEmpnEZWnxBGZRsIygf-AlKhHeiD5-hcT_D8UtCpP0bljE11oirzBg/s1600/gradhover.png') repeat-x;
color: #339;
}
#tableau a:hover {
****-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>
<t****>
<tr>
<td>1</td>
<td><a href="http://www.e7tarif.com/2014/03/page-load-time.html" rel="nofollow" target="_blank">إضافة جميلة وقت تحميل الصفحة</a></td>
<td>إضافات بلوجر</td>
<td>30</td>
<td>245</td>
</tr>
<tr>
<td>2</td>
<td><a href="http://www.e7tarif.com/2014/02/The-best-template-responsive-for-the-technical-professional-Blog.html" target="_blank">قالب تقني احترافي 2014</a></td>
<td>قوالب بلوجر</td>
<td>25</td>
<td>230</td>
</tr>
<tr>
<td>3</td>
<td><a href="http://www.e7tarif.com/2014/02/Modify-the-template.html" rel="nofollow" target="_blank">شرح تنزيل قالب جديد و التعديل عليه - للمبتدئين -</a></td>
<td>شروحات بلوجر</td>
<td>21</td>
<td>190</td>
</tr>
<tr>
<td>4</td>
<td><a href="http://www.e7tarif.com/2014/01/double-adsense-in-index-page.html" rel="nofollow" target="_blank">طريقة وضع إعلانين جوجل أدسنس أسفل التدوينة وتحت العنوان</a></td>
<td>أدسنس&nbsp;</td>
<td>19</td>
<td>187</td>
</tr>
<tr>
<td>5</td>
<td><a href="http://www.e7tarif.com/2014/01/pagerank-backlink.html" rel="nofollow" target="_blank">اعرف الفرق بين البيج رانك والباك لينك</a></td>
<td>دروس&nbsp;</td>
<td>11</td>
<td>95</td>
</tr>
</t****> </table>

لإضافة أو حذف الخانات الأفقية الموجودة في السطر الأول (الترتيب،الموضوع،التصنيف..) نقوم بالتعديل على الكود المحصور بين الوسمين thead و thead /
وذلك بحذف أو إضافة الكود ذي اللون الأزرق من بين الأكواد المحصورة بينهما مع تغيير كلمة "الترتيب" بالكلمة التي تريد .

كود:

<thead>
<tr>
<th scope="col">الترتيب</th>
</tr>
</thead>

ولإضافة الأسطر الأفقية (1،إضافة جميلة وقت تحميل الصفحة ...) نقوم بتحديد الوسم .

<t****>

نقوم بإضافة هذا الكود تحته , حيث يمثل هذا الكود الخانات الأفقية من اليمين إلى اليسار

كود:

<td>1</td>      <td><a href="http://www.e7tarif.com/2014/03/page-load-time.html" rel="nofollow" target="_blank">إضافة جميلة وقت تحميل الصفحة</a></td>      <td>إضافات بلوجر</td>      <td>30</td>      <td>245</td>    </tr>

ولتبديل عنوان الجدول ،والموجود في أسفله نقوم بتحديد هذا الكود وتغيير ما لون بالأزرق

<td colspan="5">ترتيب المواضيع حسب التصنيف وعدد الزيارات والتعليقات</td>

حيث يتم حساب عرض العنوان بطريقة تلقائية وهو يساوي عدد الخانات العمودية ,حيث يمثل العدد" 5" عدد الخانات العمودية في هذا المثال ويجب تعديله بالعدد المطلوب حسب الجدول الدي تريد إنشاءه.

لا تتردد في وضع تعليقك فبذلك تقيم عملي و تحتني لأضع المزيد من المواضيع