عمل شكل مخصص لكل إضافه فى قالب بلوجر وشرح كامل للأكواد

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

هناك بعض الخطوات التى يجب أن تفعلها

• تحديد الإضافه التى ترغب بتغيير مظهرها.
• إضافة أكواد ال سى إس إس CSS التى ستقوم بتغيير المظهر للإضافه.
• التحلى بالصبر قليلا ولا تمل بسرعه فالنتيجه ستكون مثيره للغايه.

الإختيار والتحديد

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

الكود الخاص بأى إضافه فى مدونتك ستجده على هذا الشكل

<b:widget id='HTML1' locked='false' title='صندوق التنبيهات أو للإعلان' type='HTML'>
<b:includable id='main'>
                <!-- only display title if it's non-empty -->
                <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'><data:title/></h2>
                </b:if>
                <div class='widget-content'>
                    <data:content/>
                </div>
                <b:include name='quickedit'/>
            </b:includable>
</b:widget>

هذه الكلمه HTML1 هى الإسم المعرف بإضافة صندوق التنبيهات أو للإعلان وهذا هو عنوان الإضافه كما تكتبه أنت فى عنوانها عند إضافتها, و HTML هى نوع الإضافه.

وللعلم تتغير هذه المسميات بتغير نوع الإضافه, فقط أوضح لك الشكل, وعليك تحديد الكود فى مدونتك وذلك عن طريق عمل بحث عن عنوان الأداه أو الإضافه فى كود مدونتك.

إضافة أكواد ال سى إس إس CSS التى ستقوم بتغيير المظهر للإضافه

قم بالبحث فى كود مدونتك عن الكود التالى

]]></b:skin>

والآن ستضع كود سى إس إس التالى قبل الكود السابق مباشرة

#HTML1 {
border: 1px dashed #e2e2e2;
padding: 5px;
background:#f5f5f5;
font:14px bold arial,tahoma;
color:#222222;
}

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

بعض الخيارات الإضافيه للتعديل على الأداه ومحتوياتها

للتعديل على شكل الروابط فى الأداه

#HTML1 a {
color:#5f5f5f;text-decoration:none;}
#HTML1 a:hover {
color:#cccccc;text-decoration:underline;}
#HTML1 a:visited {
color:#e1e1e1;text-decoration:underline;}

للتعديل على الصور فى الأداه

#HTML img {
border:3px solid #666444;padding:4px;background:#989765;}
#HTML img:hover {
border:3px dashed #666444;background:#f1f1f1;}

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

أرجو أن أكون قد وفقت فى تقديم هذا الشرح بشكل مبسط ويصل للجميع, ولا تترددوا فى ترك تعليقاتكم وتساؤلاتكم وطلباتكم.