مساحة إعلانية

الأربعاء، 26 فبراير، 2014

الأربعاء، 26 فبراير، 2014

اضافة ثلاث أدوات في الفوتر وتنسيقها

Add and Customize Three Column In Footer
الثلاث أعمدة أو اضافات في الفوتر أصبحت رائجة كثيراً في قوالب بلوجر والبعض لا يستغني عنها لكن هناك قوالب لا تحتوي تلك الأعمدة والبعض يريدها سنحاول في موضوعنا شرح أبسط طريقة لإضافتها وضبطها وتنسيقها بما يتناسب مع القوالب فقط نتبع الخطوات البسيطة للتركيب وبإذن الله تنجح الطريقة
أولا نحتاج لإضافة الكود التالي فوق الوسم </body>
<div id='footer-cnmu'>
<div class='footer'>
<b:section class='footera' id='footera' showaddelement='yes'/>
<b:section class='footerb' id='footerb' showaddelement='yes'/>
<b:section class='footerc' id='footerc' showaddelement='yes'/>
</div>
<div style='clear: both;'/>
</div>
لكن هناك ملحوظة أحيانا تكون حقوق القالب ايضا قبل الوسم </body> هي الاخرى وهنا قد نجد الأدوات ظهرت بعد الحقوق وليس قبلها لذلك تحتاج قليل من الخبرة لتحدد اكواد الحقوق وتضيف الكود فوقها وليس بعدها يعني حاول ان تجرب حتى تحصل على نتيجة مضبوطة لذلك لا تنسى أخذ نسخة إحتياطية من القالب

والآن نأتي للمرحلة الثانية أضف الكود التالي فوق الوسم ]]></b:skin>
#footer-cnmu {
  background:#fff;
  margin: auto;
  padding: 0;
  width: 100%;
}
.footer {
  margin: auto;
  padding: 5px 10px;
  width: 960px;
}
.footer h2 {
  background:#777;
  border-radius: 7px 7px 0 0;
  color: #fff;
  font-size: 18px;
  margin: -5px -5px 5px;
  padding: 4px 5px 8px;
  text-align: center;
}
.footera,.footerb,.footerc {
background:#EBEAEA;
border: 1px solid #bbb;
border-radius: 8px;
float: right;
margin: 5px 0 10px 8px;
padding: 5px;
width: 300px;
}
تابع معي طريقة التنسيق
هذا #fff اللون هو لون الخلفية لمجموعة الأدوات
هذا 960 هو المقاس العام للثلاث ادوات يمكن تغييره بحسب حجم قالبك

هذا #EBEAEA هو لون خلفية الآداة
وهذا #bbb هو لون الإطار
أما الرقم  300 هو عرض الادوات ايضا يمكنك تكبيرة أو تصغيرة بحسب ما تريد

هذا #777 لون خلفية عنوان الآداة
وهذا #fff لون خط العنوان
وهذا  18 حجم الخط
طبعا قليل من الخبرة في CSS وستستطيع تنسيق الآداة بشكل اكبر
وبالتوفيق بإذن الله

هناك 48 تعليقًا:

  1. السلام عليكم ورحمة الله وبركاته
    ---------------------------------
    شكراً ياطيب وجزاك الله خيراً, مبارح كنت سأسألك عن هذا وقلت اخليها الى يوم اخر ^_^

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله اخي الغالي محمد
      خيراً الحمد لله ان الله ييسر الأمور فهذا الأمر كان طلب بعض الإخوه وقد حان موعد تلبيته فلله الحمد على التوفيق
      ودائماً ما أسعد بمرورك العطر

      حذف
  2. عمرو باشا .. السلام عليكم
    دروسك كلها مية المية المية .. وعطلاء اسيادنا راضيين عليك
    مفيش حاجة عن تصميم وتطوير بلوجر
    تحويل قوالب ووردبريس للبلوجر

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

      حذف
  3. دائما اضرب بك المثل فى الاحتراف ، والقدرة على التطوير ، وخدمة الآخرين ، بارك الله فى عملك يا اخى عمرو ..تدويناتك هى سبب تطوير مدوناتنا وسرعتها وشكلها المميز ..تحياتى اليك

    ردحذف
    الردود
    1. رفع الله قدرك أخي أحمد وانتم سبب نجاحنا فبدعمكم وتواصلك المستمر هو الدافع لتقديم جديد
      فجزاكم الله خيراً تشرفت بمرورك يا طيب

      حذف
  4. السلام عليكم ورحمة الله وبركاته
    شرح جميل جدا بارك الله فيك أخي الغالي عمرو
    وجزاك الله كل خير في أمان الله

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      مشكور أخي الغالي بدر على مرورك العطر

      حذف
  5. اولا نشكركم على هذه التدوينات الرائعة و المميزة .. فعلا مدونتكم الاولى عربيا في مجال البلوجر ..

    اخي الفاضل اثناء تصفحي اليومي لجديدكم وجدت شيء لفت انتباهي و هو كود الشاشة التي تضع عليها الفيديو .. كما في الصورة . اذا ممكن اخ العزيز ان ترسل لي هذا الكود مع خالص شكري لكم . http://www7.0zz0.com/2014/03/02/11/847883594.png

    ردحذف
    الردود
    1. أشكرك يا طيب على كلماتك الرائعة
      بالنسبة لموضوع الفديو يمكنك مراجعة الموضوع التالي
      http://cnmu.blogspot.com/2013/12/Customize-Videos.html
      وببعض تعديلات css يمكنك اعطائه شكل مميز فهو نفس الكود لكن الفرق ان الكود الخاص بي محفوظ الحقوق ومتوافق مع القالب لهذا لم اعرضه لأنه لن يتناسب مع الجميع لكن هي نفسا لفكرة لا فرق أبدا

      حذف
  6. جزاك الله خيرا وزادك علما اخي \\\

    اخي ممكن ترسلي قالب جاهز ومقسم بدي اعمل انا مدونة العاب كمبيوتر واندرويد ياريت تساعدني الي اسابيع وانا بحاول وتعبت .. ويمكنني التعديل على الاقسام طبعا اقسام افقيه وتسلم اخي

    ردحذف
    الردود
    1. وجزاك الله بالمثل يمكنك زيارة اقسام القوالب لإختيار قالب مناسب
      ستجدها بالشريط العلوي للمدونة
      وشكراً لمرورك

      حذف
  7. اضافة كتير مميز وانا احتاجها الي مدونتي بس عندما قمت بتركيب الاضافة ظهترت بعد الحقوق ممكن الحل أخي عمرو ؟

    ردحذف
    الردود
    1. ولكن الإضافة لا تحتوي اى نوع من الحقوق ؟؟

      حذف
  8. كنت أقصد حقوق القالب بس تم الحل أشكرك

    ردحذف
    الردود
    1. ولكن اخي حقوق القوالب هي من اسمها حقوق يعني طبيعي ان تكون ظاهرة هذا حق معرب ومصمم القالب

      حذف
  9. اخي كيف اضيف اثنين من الادوات ( ويكونان متجاورين مع بعضهما ) اسفل رسائل المدونة الاليكترونية

    ردحذف
  10. والله لو كنت معي لقبلت جبينك أستاذ
    بارك الله فيكم

    ردحذف
    الردود
    1. أعزك الله أخي الكريم
      قل الحمد لله فهو فضله وكرمه لا فضل لي في شئ
      وبالتوفيق

      حذف
  11. أنظر أخى كيف أصبحوا هكذا
    http://im87.gulfup.com/wiur1J.png

    ردحذف
    الردود
    1. المهم طريقة عملهم أخي هل عندما تضيفه الادوات يظهرون مضبوط ؟
      فالتنسيق الداخلي يتطلب احياناً تعديلات اضافية على القالب

      حذف
  12. اريد ان اجعلها اداة واحدة وبدون خلفية او أطار

    ردحذف
    الردود
    1. ان يسر الله قريباً ساشرح طريقة اضافة آداة واحده

      حذف
  13. السلام عليكم ورحمة الله وتعالي وبركاته

    =r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r=r

    الف مليون شكر أخي الفاضل بارك الله فيك وزادك علما ورفع درجاتك ورحم والديك وأرجو التواصل مع مهم جدا أخي بالله عليك
    =e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e=e
    أخو العمدة الكابتن

    ارجو الرد في القريب العاجل ووالسلام ختام

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

      حذف
  14. السلام عليكم ورحمة الله تعالي وبركاته أخي الفاضل أولا أقدم لك الشكر علي ماتقوم به من مجهود من اجل اثراء المحتوي العربي
    كما أشكرك علي هذه الاضافة الرائعة والمنسقة بشكل جيد جدا ومنتظم
    اخي الكريم أنا قمت با اضافتها الي مدونتي بشكل صحيح علي ماأظن ولكن هناك مشكلة وهي أن أحد القوائم مرتفع فوق مع العلم أني بحث عن المشكلة
    ولم أجد لها حل كما أنه لا توجد هناك اضافات فوق الفوتر حتي تتعارض معها
    http://mubll.blogspot.com/

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      جرب اضافة الكود التالي
      .footera {
      margin-top: 35px;
      }
      فوق هذا الكود
      .footera,.footerb,.footerc {

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

    ردحذف
    الردود
    1. المشكلة يا طيب انه يصعب تحديد خطا معين من المعاينة بعض هذه الامور تحتاج حذف وتركيب يدوي للادوات
      حاول تركيبها مرة أخرى واسبق اكواد الآداة
      التي تضاف فوق body بهذا الكود
      <div style='clear: both;'/>
      اجعله قبلها وبعدها لعل الأمر يضبط

      حذف
  16. لم يحدص تغير علي العموم شكرا لك علي حسن الرد والله هو المستعان بتوفيق اخي الفاضل

    ردحذف
  17. طيب لو حبيت اخلي المساحة السفلية اعرض بحيث اتمكن من اضافة ادوت كبيرة
    كيف يتم هذا ؟

    ردحذف
    الردود
    1. هذا لا ينفع في قالبك اخي احمد فقالبك له وضع خاص حيث ان له تجاوب في الفوتر لا انصح بالتلاعب به لتجنب المشاكل

      حذف
  18. السلام عليكم استاذي الفاضل لقد ركبت الثلاث خانات في الفوتر عندي ولكن المسافة خلفهم في جانبي المدونة زادت ارجوا ان تدلني على حل واقصد مساحة الخلفية البيضاءكيف انقصها رجاءا من على مدونتي :
    http://mi3radj.blogspot.com/
    تقبل اسمى تحياتي على جهدك الرائع

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      مدونتك اخي الكريم لا ارى بها مساحات في الفوتر

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

    ردحذف
    الردود
    1. أخي لو اضفتها فوق الوسم </body> ستضبط معك
      ويمكنك ان لم تضبط ان تضيف فوق كود الإضافة الكود التالي
      <div style='clear: both;'/>

      حذف
  20. انظر اخي انا ركبتها مثل الأمس وطلعت اسفل الحقوق اريد ان تكون الحقوق اسفلها من فضلك :
    اضافة الى حذف الخلفية البيضاء
    http://mi3radj.blogspot.com/
    تقبل تحياتي

    ردحذف
    الردود
    1. اخي قالبك حوقوقه اسفل المواضيع وليست في الفوتر بالتالي لجعل الحقوق بالأسفل هذا امر يحتاج ضبط خاص خدمة دعم فني وانا لا اقدم تلك الخدمة عبر المدونة
      بالنسبة للخلفية البيضاء
      هذا الكود
      #footer-cnmu {
      background:#fff;
      يمكنك ازالة هذا الجزء منه لتكون شفافة
      background:#fff;
      او استبدل #fff بكود لون مختلف وهذا رابط به اكواد الألوان
      http://cnmu.blogspot.com/p/copy-color-picker.html

      حذف
  21. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. تم ازالة محتوى التعليق بسبب الروابط التي به معذره لهذا
      لكن رداً على سؤالك حول لماذا تكون الاكواد لدي يتم التمرير داخلها
      أخيا لكريم بعض الاكواد تكون طويلة جداً
      وربما يكون داخل الموضوع الواحد اكثر من كود
      إضافة الاكواد دون جعل التمرير يحدث هذا سيجعل الموضوع طويل للغاية ومرهق للزائر حتى في نسخ الاكواد
      بالنسبة لحفظ المواضيع والإحتفاظ بها
      ببساطة أخي اضغط زري ctrl+s
      هذا سيمكنك من حفظ المواضيع على جهازك كصفح انترنت ويمكنك الرجوع لها حتى في عدم وجود اتصال
      وهو افضل كثيراً من الـ pdf

      حذف
  22. اخى اريد ان اجعل اشكال الثلاث فواتر الى شكل الفواتر التى بمدونتى وهذه صورة لتوضيح http://www.mediafire.com/convkey/19c7/067uv31ge23g6wgzg.jpg

    ردحذف
    الردود
    1. التعديلات الخاصة اخي الكريم هي من خدمات الدعم الفني التي لا أقدمها عبر المدونة

      حذف
    2. اخى الحمد الله بعد الكثير من المحاولات جعلت الفوتر للشكل الذى اريده واخذت خبرة ايضا شكرا

      حذف
    3. الحمد لله أخي احسنت

      حذف
  23. اخى الكريم عندما اضيف اى اداة تاخذ المحاذاة الى اليمين انا اريدها ان تتوسط المساحة ليكون شكلها افضل الاكواد ضفتها كما هى باستثناء التعديلات على الالوان

    ردحذف
    الردود
    1. أخي الإضافات طبيعي تأخذ محاذاة اليمين لانهم متراصون بجانب بعضهم
      اما لو تقصد الأدوات التي تضيفها داخل الأقسام هذا يرجع للادوات نفسها وتصميمها
      وهذا أبسط كود توسيط
      <center>
      </center>
      اضف كود الآداة بين الكودين للتوسيط ربما يحل المشكله بخلاف ذلك يرجع لتصميم الآداة

      حذف
  24. أخي العزيز لدي في اسفل مدونتي ثلاث خانات وهي 1_ عن الموقع 2_ احصائية الموقع 3_ اعلن هنا أخي كيف يمكنني التعديل عليهم ؟ ونا قد قمت بدخول الى التخطيط ومن ثم خانة عن الموقع وقمت بكتابة نص بالعربي لكن لم يظهر ساعدني بارك الله يك

    ردحذف
    الردود
    1. حقيقة أخي الكريم هذا النوع من الطلبات هو يخص امور الدعم الفني والتي تتطلب تحرير القالب بنفسي وهذه الطلبات لا اقدماه عبر المدونة نهائياً فاعتذر منك وارجو تفهم الامر

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©