hamide slam
2013-03-11, 13:09
كيف تقوم بتخصيص شكل مميز لكل إضافه من إضافات مدونتك على حدى, ولا تمانع فالأمر ستجده ممتعا ومثيرا للغايه .. هيا بنا.
http://4.bp.blogspot.com/-ueVd2zBCFo0/TyRSu-ZzxEI/AAAAAAAAH5s/nY0sBMMZe6Q/s320/widgets-custom.jpg
هناك بعض الخطوات التى يجب أن تفعلها
تحديد الإضافه التى ترغب بتغيير مظهرها.
إضافة أكواد ال سى إس إس 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-*******'>
<data:*******/>
</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;} وهكذا تستطيع التحكم فى كل جوانب الأداه
إنشاء الله يكون لي شرحات أخرى في بلوجر
http://4.bp.blogspot.com/-ueVd2zBCFo0/TyRSu-ZzxEI/AAAAAAAAH5s/nY0sBMMZe6Q/s320/widgets-custom.jpg
هناك بعض الخطوات التى يجب أن تفعلها
تحديد الإضافه التى ترغب بتغيير مظهرها.
إضافة أكواد ال سى إس إس 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-*******'>
<data:*******/>
</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;} وهكذا تستطيع التحكم فى كل جوانب الأداه
إنشاء الله يكون لي شرحات أخرى في بلوجر