معهد خبراء بلوجر - كود لإضافة موضوع اختياري لكل قسم في القائمة الجانبية لبلوجر

السلام عليكم
بعد طلب أحد الأعضاء لطريقة إضافة موضوع اختياري لكل قسم في القائمة الجنبية لبلوجر
حاولت أن أعمل كود HTML بسيط عن طريق الفرونت بيج، قد يفي بالغرض وكانت النتيجة كالتالي :

مثال حي : مدونة تجريبية

صورة :
http://i1258.photobucket.com/albums/...p/c2d31315.png

شرح التركيب :

أضف الكود التالي في أداة HTML/JavaScript :

كود:



<div align="center">

    <table border="1" width="250" dir="rtl" cellspacing="0" cellpadding="0" bordercolor="#C0C0C0">

        <tr>

            <td height="30" bgcolor="#69D2E7" colspan="2">

            <div align="center"><b><font face="Tahoma">رياضة</font></b></div></td>

        </tr>

        <tr>

            <td height="5" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="80" width="80" rowspan="2">

            <div align="center"><font face="Tahoma">

            <img border="0" src="http://www.theme4wordpress.net/wp-content/uploads/et_temp/sport-150x150-7025_70x70.jpg" width="70" height="70" /></font></div></td>

            <td height="30" width="220">

            <div align="center"><b><font face="Tahoma">

            <a href="http://www.bloggerexp.com/"><font color="#FA6900">عنوان 

                مختصر الموضوع الرياضي</font></a></font></b></div></td>

        </tr>

        <tr>

            <td height="50" width="220">

          <div align="center"><font face="Tahoma" size="2">

            وصف قصير للموضوع</font></div></td>

        </tr>

        <tr>

            <td height="10" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="30" bgcolor="#C7F464" colspan="2">

            <div align="center"><b><font face="Tahoma">صحة</font></b></div></td>

        </tr>

        <tr>

            <td height="5" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="80" width="80" rowspan="2">

            <div align="center"><font face="Tahoma">

            <img border="0" src="http://www.uk250.co.uk/images/icons/health.jpg" width="70" height="70" /></font></div></td>

            <td height="30" width="220">

            <div align="center"><b><font face="Tahoma">

            <a href="http://www.bloggerexp.com/"><font color="#FA6900">عنوان 

                مختصر الموضوع الصحي</font></a></font></b></div></td>

        </tr>

        <tr>

            <td height="50" width="220">

            <div align="center"><font face="Tahoma" size="2">وصف قصير للموضوع</font></div></td>

        </tr>

        

        <tr>

            <td height="10" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="30" bgcolor="#FF6B6B" colspan="2">

            <div align="center"><b><font face="Tahoma">فن</font></b></div></td>

        </tr>

        <tr>

            <td height="5" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="80" width="80" rowspan="2">

            <div align="center"><font face="Tahoma">

            <img border="0" src="http://pics.ricardostatic.ch/2_681190690_prem/peintures-et-arts-graphiques/abstract-art-acryl-gemaelde-bilder-kunst-von-micha.jpg" width="70" height="70" /></font></div></td>

            <td height="30" width="220">

            <div align="center"><b><font face="Tahoma">

            <a href="http://www.bloggerexp.com/"><font color="#FA6900">عنوان 

                مختصر الموضوع الفنــي</font></a></font></b></div></td>

        </tr>

        <tr>

            <td height="50" width="220">

            <div align="center"><font face="Tahoma" size="2">وصف قصير للموضوع</font></div></td>

        </tr>

        

                    <td height="10" colspan="2">

            <div align="center"></div></td>

        

        <tr>

            <td height="30" bgcolor="#FA6900" colspan="2">

            <div align="center"><b><font face="Tahoma">ثقافة</font></b></div></td>

        </tr>

        <tr>

            <td height="5" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="80" width="80" rowspan="2">

            <div align="center"><font face="Tahoma">

            <img border="0" src="http://www.mc2grenoble.fr/mc2_affiche/img/logo-france-culture.jpg" width="70" height="70" /></font></div></td>

            <td height="30" width="220">

            <div align="center"><b><font face="Tahoma">

            <a href="http://www.bloggerexp.com/"><font color="#FA6900">عنوان 

                مختصر الموضوع الثقافي</font></a></font></b></div></td>

        </tr>

        <tr>

            <td height="50" width="220">

            <div align="center"><font face="Tahoma" size="2">وصف قصير للموضوع</font></div></td>

        </tr>

        

    </table>

</div>

شرح الكود :

bordercolor="#C0C0C0" :الرمز C0C0C0 يمثل كود لون الإطار
width="250" : العدد 250 يمثل عرض الأداة بالبكسل
bgcolor=" الرموز المتبوعة ب# ثمثل أكواد لون خلفية عناوين الأقسام
الروابط الخضراء : تمثل روابط الصور
العناوين البنفسجية : تمثل عناوين الأقسام
width="70" height="70" : يمثل عرض وارتفاع الصور بالبكسل
http://www.bloggerexp.com/ : استبدله برابط كل موضوع على حدة

_________________________________

لإضافة أقسام أخرى أضف الكود التالي مباشرة قبل </table> مع تغيير ما يلزم تغييره :

كود:

<td height="10" colspan="2">

            <div align="center"></div></td>

       

        <tr>

            <td height="30" bgcolor="#رمز لون خلفية عنوان القسم" colspan="2">

            <div align="center"><b><font face="Tahoma">ثقافة</font></b></div></td>

        </tr>

        <tr>

            <td height="5" colspan="2">

            <div align="center"></div></td>

        </tr>

        <tr>

            <td height="80" width="80" rowspan="2">

            <div align="center"><font face="Tahoma">

            <img border="0" src="رابط صورة الموضوع" width="70" height="70" /></font></div></td>

            <td height="30" width="220">

            <div align="center"><b><font face="Tahoma">

            <a href="رابط الموضوع"><font color="#FA6900">عنوان

                مختصر للموضوع</font></a></font></b></div></td>

        </tr>

        <tr>

            <td height="50" width="220">

            <div align="center"><font face="Tahoma" size="2">وصف قصير للموضوع</font></div></td>

        </tr>

أعرف أن الكود معقد نوعا ما = أي مساعدة أنا في الخدمة

غير مسجل إذا أعجبك الموضوع لا تبخل علينا برد وبالضغط على زر أعجبني للفيسبوك أسفله