تخصيص شكل مميز لكل إضافه من إضافات مدونتك بلوجر

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

تخصيص شكل مميز لكل إضافه من إضافات مدونتك بلوجر Widgets-custom

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

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

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

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

<blockquote>

كود PHP:
<b:widget id='HTML1' locked='false' title='صندوق التنبيهات أو للإعلان' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-*******'>
<data:*******/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</blockquote>هذه الكلمه HTML1 هى الإسم المعرف بإضافة صندوق التنبيهات أو للإعلان وهذا هو عنوان الإضافه كما تكتبه أنت فى عنوانها عند إضافتها, و HTML هى نوع الإضافه.
وللعلم تتغير هذه المسميات بتغير نوع الإضافه, فقط أوضح لك الشكل, وعليك تحديد الكود فى مدونتك وذلك عن طريق عمل بحث عن عنوان الأداه أو الإضافه فى كود مدونتك.

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

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

كود PHP:
]]></b:skin>
</blockquote>والآن ستضع كود سى إس إس التالى قبل الكود السابق مباشرة<blockquote>

كود PHP:
#HTML1 {
border: 1px dashed #e2e2e2;
padding: 5px;
background:#f5f5f5;
font:14px bold arial,tahoma;
color:#222222;
}
</blockquote>وهذا الكود الملون باللون الأحمر هو مثال فقط لشكل الكود الذى ستضيفه, حيث تضع أنت مكانه الأكواد التى تود إضافتها لتحصل على الشكل الذى ترغب به لإضافتك او لأداتك.

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

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

كود PHP:
#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;}
وهكذا تستطيع التحكم فى كل جوانب الأداه
إنشا[size=16]ء الله يكون لي شرحات أخرى في بلوجر
[/size]

جزاك لله كل خيرا اخي و بانتظار ابداعك الجديد و تسلم اناملك المبدعة و الفنانة خيو
اخوكم نادر