نظرة على طريقة عمل الجداول

تعتبر الجداول من الأشياء الهامة التي تساهم في عمل عرض جيد للكلمات والروابط والصور وتتعدد إستخداماتها لكن قليل من المدونين من يستخدمها والكثير يراها معقده ولا يفهم طريقة اعداداتها سنبسط طريقة عمل الجداول بأسهل شكل بحيث تتمكن من ادراجها بكل سهولة في مدونتك أو تصنع منها ادوات او أى شئ تريده البعض يظن أن الجداول هي فقط عمل جدول كتابي ولكن يمكن للجداول ان تصنع منها العديد من الاشياء لو نظرنا للصورة الخاصة بالموضوع لوجدنا جداول لمقارنات بين منتجات أو تصنيف يدخل بها رموز دول أو أسعار منتجات او يمكنك عمل بها أشياء اخرى مثل نتيجة أو جدول لدرجات الحرارة أو مواقيت الصلاة أو البومات للصور والروابط حتى التبادل الإعلاني والصور التي نستخدمها به هي جداول لذلك معرفة طريقة عملها مهم جداً لمدوني بلوجر

نبدا على بركة الله

هذا هو أبسط شكل منسق للجداول

العنصر الأول	العنصر الثاني	العنصر الثالث
العنصر الأول	العنصر الثاني	العنصر الثالث

وهذا هو الكود وسنقوم بشرحة

style="background:#F66">

العنصر الأول	العنصر الثاني	العنصر الثالث
العنصر الأول	العنصر الثاني	العنصر الثالث

جزء الستايل

الجزء الأزرق باكمله من البداية للنهاية هو الجزء الذي يتم تحديد فيه التنسيق الرئيسي للجدول
ما يهمنا بداخله هي الأكواد المعلمة بالاحمر
أول كودين هم حجم الصور التي ستوضع في الجدول العرض 125 والإرتفاع 125 بحيث يتم تصغير أو تكبير جميع الصور بهذا الشكل يمكن تغيير القيم كما تشاء أو احذف الجزء البرتقالي بما فيه أكواد العرض والطول لتصبح الصور تتخذ حجمها الطبيعي

بالنسبة لهذا الكود border:1px solid #000; الرقم 1 هو حجم الإطار الذي يفصل بين الخانات واللون #000 هو لو الإطار

أما الكود الاخير width:125px; فهو يعبر عن عرض الخانات

هذا هو الجزء الأساسي في التنسيق وطبعا من له خبره في Css سيستطيع التعامل معه بشكل أفضل

جزء الـ HTML

يتكون الجدول من الوسم



ببساطة الوسم = بداية سطر حتى وسم الإغلاق هنا ينتهي السطر
أما الوسم  فهو يساوي خانة بمعنى أن ما كتبناه هو سطر به خانة واحده
لو كررنا بهذا الشكل



 

أصبح هكذا سطر يحتوي ثلاث خانات 
 


 




 

هكذا أصبح لدينا سطرين كل منهما يحتوي ثلاث خانات
لو نظرنا للمثال الموجود سنجده أنه أيضا جدول مكون من ثلاث أسطر كل منهما يحتوي ثلاث خانات
طبعا يمكن الزيادة في عدد الخانات لكن هناك جزء زائد وهو
style="background:#F66"
هذا الجزء هو لون الخلفية ان وضعناه بعد وسم السطر سيصبح بهذا الشكل
 #F66">
معناه أن هذا السطر باكمله سيصبح بهذا اللون #F66
وبالتالي يمكنك التلاعب بلون كل سطر

أما لو وضعنا نفس الكود ولكن بعد وسم أحد الخانات بهذا الشكل  فيصبح
#3FC">  
معناه أن تلك الخانة وحدها ستصبح بلون مختلف وهو ما نراه في الجودل
أن الخانة الوسطى من السطر السطر الثاني لونها مختلف

يمكنك تكرار أى عدد من الأسطر والخانات لتنشئ جدولاً

لكن كيف نحدد ما بداخل الخانة هل هو نص أم رابط أم صورة أم صورة قابلة للضغط ؟؟

ببساطة اضف بين كود الخانة أحد هذه الأكواد

إضافة رابط	Name
إضافة صورة
إضافة صورة قابلة للضغط

lمكان هذا الرمز # تضيف الرابط ومكان كلمة name تضيف أى كلمة تريد

 ومكان هذا # الوجود في هذا الكود src="#" تضيف رابط الصورة

وطبعا هذا مثال لإضافة رابط داخل خانة

Name

أو في المثال الاصلي ستجد الثلاث خانات الأخيرة تحتوي صور
 أتمنى أن يكون الامر واضحاً وهذه مجرد فقط وضع قدمك على سلم التعامل مع الجداول

فابدع وأطلق لمخيلتك العنان

وبالتوفيق

قالب Zylyz معرب ومطور

قالب Zylyz من القوالب البسيطة جداً والخفيفة وله طابع لوني هادئ ويمتاز بالاناقة وهو يناسب المدونات النسائية كثيراً وهو نوع من التغيير من النمط العام للقوالب التي نعرضها خصوصا أن كثير من الأخوات أصبحوا حاليا منافسون اقوياء جداً في عالم بلوجر بل وتفوقوا على الشباب بقوة , لذلك يجب أيضاً ن نقدم نوع من القوالب يتناسب مع مدوناتهم طبعا ليس جميع الفتيات يدونون في المجالات النسائية او التصميم فهذا القالب يناسب مدونات التصميم أيضا فبعضهن يدون في مجالات التقنية و بلوجر (( وبيحاربونا في اكل عيشنا )) ^_^ لكن عموما هو قالب يتناسب مع من طلبوه من الأخوات لمحتوى مدوناتهم

معاينـة  تحميــل

مميزات القالب

الخفة والسرعة وصديق لمحركات البحث

متوافق مع المتصفحات العالمية

يحتوي على أربع أدوات في الفوتر

تم اضافة أكواد الميتا تاج في بداية القالب قم بتغيير ما يلزم

يحتوي على قائمة منسدلة وهي من التطويرات

فقط ندخل الى صفحة التخطيط ونحرر الآداة Css menu ونضيف بها هذا الكود

• العنصر الأول


• العنصر الثاني
  
  
  
  • رابط فرعي 1
  
  
  • رابط فرعي 2
  
  
  • رابط فرعي 3
    
    
    
    • ثانوي 1
    
    
    • ثانوي 2
    
    
    • ثانوي 3
    
    
    
    
  
  
  • رابط فرعي 4
  
  
  • رابط فرعي 5
  
  
  
  


• العنصر الثالث


• العنصر الرابع

وللتعرف أكثر على التعامل مع القائمة قم بزيارة الوضوع التالي من هنــا

يحتوي القالب على اضافة معلومات عن الكاتب بشكل يتناسب معه

يمكن البحث عن كلمة الكاتب وتغيير ما يلزم ومهم زيارة هذا الوضوع لشرح الإضافة من هنــا

يحتوي القالب على سلايدر جذاب ويتم تخصيصه بتعديل هذه الاكواد

   

   

   

   

   

الروابط هي روابط كل صورة قم بتغييرها بالصورة المناسبة ورمز # هذا هو رمز الرابط الذي تؤدي اليه الصورة عند الضغط عليها استبدله بما يناسبك

طبعا ننوه على عدم حذف حقوق التعريب وعدم مخالفة شروط الإستخدام

وبالتوفيق في إستخدام القالب

اعطاء فديوهاتك على بلوجر شكل مميز

كل مدونة لا تخلو من فديو أو اثنين ومدونات أخرى تمتلئ بها ولهذا شكل الفديو قد يكون هاماً وإعطاء الفديو مظهر جيد يليق مع المدونة يضيف لمسة جمالية ولهذا في هذا الموضوع سنقوم بعمل أمر بسيط جداً لتمييز الفديوهات في المدونة وإعطائها مظهر جيد وسنستخدم أبسط الأكواد وأخفها واسهلها في التنسيق وسيتم شرح تنسيق هذه الاكواد بشكل كامل بحيث تحصل على مظهر يتماشى مع مدونتك لكن أولا يمكنك معاينة شكل الفديو من نموذج المعاينة التالي ولا تنسى هذا مثال فقط يمكنك عمل الكثيير ن التنسيقات على الفديوهات

معايــنة

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

أولا قم بالدخول الى صفحة تحرير قالبك ثم قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع

ثم فوق الوسم ]]> أضف الكود التالي

.cnmuvideo {
  background:#FFFFFF;
  border: 6px dashed #D73B36;
  border-radius: 15px;
  box-shadow: 0 0 5px 4px #000000;
  height: 315px;
  padding: 10px;
  width: 420px;
  margin:10px auto;
}

وهذه هي طريقة التنسيق

اللون #FFFFFF هو لون خلفية الفديو
أما هذا اللون #D73B36 هو لون الإطار الخارجي
الرقم 6 هو حجم الإطار
أما بالنسبة لكلمة dashed  فهي تعني ان الإطار عبارة عن خطوط متقطعة
يمكن استبدالها بـ dotted لتصبح نقاط متقطعة
أو solid ليصبح الإطار خط كامل دون تقطيع
الرقم 15 هو درجة نعومة الحواف
هذا اللون #000000 هو لون الظل الخارجي
والرقم 315 هو ارتفاع الفديو
و 420 هو عرض الفديو
طبعا الإرتفاع والعرض المحددين سيكونان هما أيضا المستخدمان في كود الفديو

طريقة اضافة الفديو 

عندما يأتي وقت اضافة الفديو وانت تكتب الموضوع قم بتحويل صندوق كتابة الرسائل من وضع التأليف الى وضع HTML

ثم اضف الكود التالي

كود الفديو هنا

تضع كود الفديو في المكان المحدد طبعا الحصول على كود الفديو يكون من موقع الفديو مثال في اليوتيوب 

تجد الكود تحت الفديو بالضغط على مشاركة >> تضمين >> وستجد الكود وهذا مثال عند وضع كود الفديو

وكما ترى العرض والإرتفاع في كود الفديو هما نفس لعرض والإرتفاع في الكود السابق

انتهى درسنا بفضل الله

الحزمة الخدمية للتعامل مع الصور XnView Shell Extension

الصور والتعامل اليومي معها جزء من عمل المدون وطبعا هناك العديد من البرامج التي تتيح التعامل مع الصور لكن السرعة مطلوبة في بعض الأمور كتحويل صيغ الصور او تعديل الإتجاهات أو حتى رفعها وهنا ياتي دور تلك الحزمة الخدمية فهي حزمة تضيف خيارات على الزر الأيمن للماوس تمكنك من معاينة الصور وتحويل الإمتداد او قلب الصور أو نسخها أو حتى رفعها بضغطة زر بدون فتح برامج او أى شئ فقط كليك يمين واختار الأمر الذي يعجبك يمكنك التحويل بين الصيغ الآتية GIF, BMP, JPG, PCX, PNG, TIF, TGA  وطبعا هذا يوفر الكثير من الجهد كما انها تمكنك من رفع الصور السريع على موقع ImageShack كثير من المميزات في هذه الحزمة البسيطة يجب ان تكون على جهازك

إسم الحزمة : XnView Shell Extension

الترخيص : مجاني

الإصدار : V3.50

بيئة العمل : Windows 2000/XP/2003/Vista/7

الحجم : 1 ميجا تقريباً صغير جداً

تحميل النسخة 32   تحميل النسخة 64

قائمة منسدلة خفيفة فقط CSS

القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري Jquery ومنها ما يعمل باكواد CSS فقط , ماالفرق بينهما ؟ الفرق ان التي تعمل بتقنية جي كويري اكثر تطورا لكنها أثقل  أما الـ CSS فهي خفيفة للغاية وسهلة التعامل وانا أفضلها جداً ولهذا قمت بإنشاء هذه الإضافة وراعيت أن تكون سهلة التركيب و التنسيق للجميع لكي يتحكم بها كل مستخدم كما يريد

أولا عاين الإضافة من هنا

بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt

• العنصر الأول


• العنصر الثاني
  
  
  
  • رابط فرعي 1
  
  
  • رابط فرعي 2
  
  
  • رابط فرعي 3
    
    
    
    • ثانوي 1
    
    
    • ثانوي 2
    
    
    • ثانوي 3
    
    
    
    
  
  
  • رابط فرعي 4
  
  
  • رابط فرعي 5
  
  
  
  


• العنصر الثالث


• العنصر الرابع

والآن مع شرح التنسيق

هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة

كرر السطر الأحمر في حالة الرغبة في إضافة عنصر جديد
الجزء الأزرق كاملأ هو إضافة قائمة منسدلة بداخلها قائما منسدلة أخرى كما هو موجود في المعاينة
الجزء الأخضر هو القائمة المنسدلة الفرعية يمكنك ازالتها أو تكرارها ان أردت زيادة
قليل من التركيز في الأكواد ستنجح في تنسيقها كما تريد
وطبعا تغير إسم كل رابط كما تريد وبالنسبة لرمز الـ # إستبدله بالرابط المراد فتحه عند الضغط على العنصر
وبالتوفيق