الأربعاء, فبراير 01, 2012

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

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

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

  • تحديد الإضافه التى ترغب بتغيير مظهرها.
  • إضافة أكواد ال سى إس إس 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;}
وهكذا تستطيع التحكم فى كل جوانب الأداه أو الإضافه بإتباع هذه الطريقه مع إستخدام الأكواد التى تناسب إختياراتك ورغباتك الشخصيه, فتجعل كل إداه مختلفه عن الإخرى فى شكلها العام وفى شكل روابطها وفى شكل صورها وفى شكل خطوط كتابتها.

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

14 تَعْلِيق:

  1. .

    يشرفني ان اقوم بالرد الاول

    شرحك جميل وفي منتهى الروعه ولكني اريد شي اخر جزاك الله خير

    وهي كيف اقوم بتصغير الاداة وانا هنا اقصد اضافة اداة جديدة مثل اضافة اداة Html\Java مثلا المعروف ان تظهر يمين او يسار المدونة

    هذه الاداة او السلايدر كيف استطيع التحكم بحجمه مثل اريد مقاسه اصغر من المقاس المعروف في المدونات

    من اين اقوم بتعديل حجم الاداة ارجوا مساعدتي في هذا الموضوع وعدم اهمالي وشكرا لك اخي العزيز ياسر

    .

    ردحذف
  2. Wikileaks Alarabia : تستطيع التحكم فى الطول عن طريق height والعرض عن طريق width ويكونان على الشكل التالى
    #HTML1 {
    width: 300px;
    height: 200px;
    }
    وتستطيع تغيير الأرقام للحجم الذى تريده

    ردحذف
  3. ياسر كيف الحال ؟ فين غبت يا رجل ؟
    لو انك ما اضفتني على اوركيوت ماكنت شفتك يا مان ^^!
    على العموم ... موضوع جميل ومميز
    واصل يا بطل
    مع اجمل تحياتي ;)

    ردحذف
  4. Dev Nasser : شكرا جدا على سؤالك .. انا تمام الحمد لله .. انت ازيك ؟
    انا اول ما لقيتك على اوركيوت ضيفتك .. اصلى لسه جديد عليه
    عموما المدونه شغاله علطول وفيها الجديد دائما ... وكله بمساندتكم ليا

    ردحذف
  5. ان شاء الله نحن دعم لكل شخص له يد في اغناء المحتوى العربي والرفع مت مستواه ولو من بعيد
    اسمع ... اذا تريدني ان اكتب بعض الاشياء هنا او اردت الكتابة في اي من مدوناتي ال 20 ^^! فمرحبا بك
    هكذا نتعاون اكثر ;)
    ورجوعك للتدوين هنا يدل على ان تركي لمسالة شراء المدونة كان صائبا ;)
    يلاا شد الهمة ... لا نريد يأسا من جديد :)

    ردحذف
  6. اه ... بالنسبة لاوركيوت ..
    انا فيه من زمان لكنني لا انشط فيه كثيرا ... في الحقيقة ان العرب شبه منعدمين فيه واستغله في بعض الاحيان للترويح لبعض التدوينات التي اكتبها بالانجليزية لا اكثر
    على العموم ... هو جيد ايضا للتفاعل مع اناس اخرين خصوصا ان كل مشتركيه تقريبا يستعملون خدمات ومنتجات جوجل كبلوجر وجي ميل :)

    ردحذف
  7. تمام .. لو عندك تدوينات جديده وخاصه لمدونة نصائح للمدونين تقدر تبعتهالى علشان انشرها بإسمك

    ردحذف
  8. طيب استناني في الاسبوع القادم على ابعد تقدير
    يمكن ارسل لك افضل موضوع انتقيه من عندي او اكتبه من اوله اثناء الاسبوع القادم ان شاء الله
    تحياتي :)

    ردحذف
  9. العفو على التاخير وشكرا لردك اخي ياسر

    ولكن يبدو انك لم تفهم سؤالي جيدا

    انا اقصد في مربع القالب ستجد مكتوب اداة اضافة ( اوك )

    انا اريد تصغيرها ولست ادري من اين وهنا لااستطيع ارفاق صورة


    وبمعنى افضل

    انظر لمربعات السلايدر عندك باليسار
    اخر التعليقات
    التسميات

    هل تنظر لحجم المربع لنفترض انه عرضه 6سم

    انا اريد تصغيره هذه هي المشكلة التي اريد ان اعرفها

    وجزاك الله الف خير اخي ياسر

    ردحذف
  10. Wikileaks Alarabia : للأسف لن استطيع شرح هذه المسأله لأنها معقده بعض الشىء .. من الممكن أن أحاول أجد حل فى تدوينه قادمه

    ردحذف
  11. رائع جدا قمت بعمل بعض التعديلات على قالبى واصبح جميلا فعلا لكن عندى سؤال من فضلك هل توجد طريقه مماثله لمثل هذه الطريقه ولكن لتحديد الاطار الخارجى للرساله داخل المدونه انظر مدونتى وقل لى رائيك عنها وان كان بها تعديلات ارجو ابلاغى من فضلك بعين الخبير وشكرا لك واسف على الاطاله
    مدونتى هى sherefshokre.blogspot.com

    ردحذف
  12. كل الشكر لك اخى ياسو على كلماتك الجميله عن مدونتى المتواضعه لكن حاولت ان اطبق نفس الطريقه بوضع كود css ومعها تحديد لمكان الرسائل على مدونه تجريبيه ولم افلح حقيقتا فهل من طريقه اخرى ام مازا عزرا فا انا لست متمكن فى هذه اللغه وشكرا لك مره اخرى

    ردحذف
  13. للاسف ليست الاكواد متشابهه فى كل القوالب وانما لكل قالب اكواده الخاصه به ولذلك يتطلب احترافيا ليقوم بهذا العمل

    ردحذف
  14. chokran lak

    http://www.chahidna.com

    ردحذف