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

08-04-2012, 02:40 AM

admin

مدير عام

تاريخ التسجيل: Apr 2012

الدولة: جده

المشاركات: 2,846

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

أنا : admin

سجل معنا لتتمتع بهذه الخاصية

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

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

صورة :

شرح التركيب :

أضف الكود التالي في أداة 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>

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

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

الممالك البعيدة معجب بهذا

__________________

من مواضيع admin

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

موضوع لكل قسم, blogger, القائمة الجانبية, بلوجر, إضافة, كود

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 3 ( الأعضاء 0 والزوار 3)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
إدراج بانرات عشوائية داخل رسائل المدونة أو القائمة الجانبية	bboyhishem	إضافات وأدوات بلوجر	2	04-18-2013 06:11 PM
ممكن طريقة نقل لاقائمة الجانبية للشمال	noor zahran	طلبات تعديل القوالب	3	12-21-2012 08:22 PM
إضافة مساحة إعلانية 125×125 إلى القائمة الجانبية لمدونات بلوجر	admin	إضافات وأدوات بلوجر	11	12-06-2012 07:39 PM
اضافة القائمة البريديه لبلوجر	بلال حمدان	إضافات وأدوات بلوجر	2	09-09-2012 03:33 PM

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

إضافات وأدوات بلوجر