تغيير حجم البوست و القوائم الجانبية في بلوجر

طريقة تغيير حجم القوائم في بلوجر , التحكم بالقالب

بقلم : محمد طاهر
... بسم الله الرحمن الرحيم ...
توجد بعض القوالب تكون متناسبة مع مدونة معينة من حيث الشكل و لكنها غير مناسبة له من حيث أحجام وعدد القوائم وبالتالي يلجأ صاحب المدونة إلي تغيير القالب لأنة يريد مثلا قوائم جانبية بحجم أكبر من الموجودة بمدونتة أو أنة يريد " post " بحجم أكبر أو أصغر من الموجودة بمدونته و هو مكان عرض مواضيع المدونة , ولذلك سيستفيد كل صاحب مدونة من تغيير حجم أي قائمة بمدونتة دون اللجوء لتغيير القالب و القليل من مستخدمي بلوجر يعرف بعض المصطلحات عن تعديل القوائم من داخل صندوق الأكواد و لكن الأغلبية العظمي لا تعرف كيف تقوم بتغيير حجم القوائم بالمدونات وسنقوم في هذا الموضوع بشرح طريقة تعديل حجم القوائم لمن يرغبون بذلك .



وقبل الخوض في تعديل الأكواد يجب التعرف علي بعض قواعد التعديل لتسهيل المأمورية " أولا يوجد حجم كلي للمدونة وحجم جزئي للقوائم ولتوضيح المعني نضرب مثال بالفرض أنك تملك قطعة أرض فضاء بمساحة " 1000 " متر وتريد بناء منزل أو فيلا عليها فلابد من تحديد أماكن وأحجام الغرف بمعني أنك ستحدد مثلا عدد الغرف وحجم كل غرفة علي حدة وإن كنت تريد مثلا حمام سباحة ستحدد مكانة وحجمه لكي تتناسب الأحجام مع بعضها , و لكنك في النهاية أنت مرتبط بتوزيع أحجام الغرف وحمام السباحة و باقي المبني علي مساحة " 1000 متر " و لا تستطيع أن تبني علي أكثر منها , فالمدونة أيضا لها نفس فكرة التصميم السابقة ولها حجم كلي يشبه مساحة " ال 1000 متر " و أنت مقيد بها وهذا التصميم يكون في القالب المخصص للمدونة ويتم من خلالة تحديد حجم القوائم و أماكن الرسائل وأماكن التعليقات و هيدر المدونة ... الخ علي حسب المساحة الكلية لقالب المدونة فيجب مراعاة عدم تمديد أو تكبير حجم قائمة دون تصغير الأخرى بمعني أوضح إن كان حجم المدونة الكلي " 1000 بكسل " موزعة علي قوائم المدونة كالتالي فمثلا قائمة المواضيع " 700 بكسل " و القائمة الجانبية " 300 بكسل " فعندما نريد أن نقوم بتكبير القائمة الجانبية من " 300 بكسل " إلي " 400 بكسل " فإننا في المقابل حتما سنقوم بتصغير قائمة المواضيع من " 700 بكسل " إلي " 600 بكسل " لأننا مقيدون بمساحة " 1000 بكسل " و حتى لا تطغي قائمة علي أخري فيترتب علية تشويه شكل المدونة , وهكذا مع باقي الأكواد وهذه هي الطريقة السليمة لتكبير آو تصغير أي كود بقالب المدونة ولذلك عند تكبير قائمة معينة ستكون علي حساب القائمة الأخري وإن قمت بتكبير قائمة دون تصغير القائمة المجاورة لها فسوف يترتب عليه تشوية المدونة ونؤكد ونقول أنة يجب أن يكون مقدار الزيادة لأي قائمة مساوي لمقدار النقصان في القائمة المجاورة لها فمثلا إذا قمنا بزيادة القائمة الجانبية بمقدار " 10 بكسل " فيجب أن ننقص أي قائمة مجاورة لها بمقدار " سالب 10 بكسل " و بالنسبة للأكواد فهي عادة تنقسم إلي قسمين متشابهين و متتالين مع اختلاف الاسم الخارجي " هذا الموضوع خاص بمدونة الحبوني " .
.
فمثلا الكود الخاص بحجم الرسائل بالمدونة " post " سيتكون من قسمين .
أول قسم سيكون بهذا الاسم " #main-wrapper "
وستجد أسفل منه مباشرة القسم الثاني
وهو أيضا كود يحمل أسم " #main "
ولتوضيح المعني نقول أن الكود الأول " #main-wrapper " و معناها الحرفي " المجمع الرئيسي " .
والكود الثاني " #main " ومعناها الحرفي " المجمع " .
ما الفرق بين الكود الأول والثاني ... ؟
بالنسبة للكود الأول نقول أن كلمة " # main-wrapper " و معناها المجمع الرئيسي أو رئيس الكود وهي تمثل المساحة المتاحة لقائمة المواضيع " 600 بكسل " ويمكن تكبيرها وتصغيرها لأي رقم ولكن بحسب حجم القوائم المجاورة .
و بالنسبة للكود الثاني " #main " فهو النائب عن الكود الرئيسي وهو المتحكم بالحشو الداخلي لمساحة الكود الكلية ويمكنك تصغيرها لأي رقم ولكن لا يمكن تكبيرها لأكثر من الحيز المتاح الذي يحددة الكود الرئيس وهو " 600 بكسل " وهذا معناه أن هذا الكود الداخلي لا يستطيع أن يتحكم في المساحة الكلية والمتحكم فيها هو الكود الرئيسي ويجب أن يكون الكود النائب " #main " " أصغر من الكود الرئيسي " #main-wrapper " لضمان نجاح أي تعديل ولكي تقوم بتعديل الأكواد بطريقة صحيحة يجب أن تقوم بتطبيق الخطوات بدقة . مصدر الموضوع الأصلي هو مدونة الحبوني .
و بعد أن وضح المعني يجب أن نطبق هذا الشرح علي جميع الأكواد من هذا النوع و كما ذكرنا أن صندوق الأكواد عبارة عن أكواد ورموز يجب التعامل مع كل رمز أو حرف بحذر شديد لأن أي خطأ سيربك المدونة , فمثلا لكي نقوم بتعديل أرقام الكود الخاص بحجم " post " وهو المكان الذي تظهر به رسائل المدونة سيكون كالتالي :

رسم توضيحي يبين مكان الكود الرئيس " warpper " والكود النائب لمنطقة " post "

قواعد التعديل :
بالنسبة لقواعد التعديل التي سنتبعها ستكون كالأتي :
1 - إذا قمت بتكبير منطقة " post" فعليك بتصغير القائمة الجانبية بنفس النسبة .
2 - إذا قمت بتكبير القائمة الجانبية فعليك بتصغير قائمة " post " بنفس النسبة .
3 - إذا كان القالب بثلاثة قوائم فيجب عند تصغير أو تكبير أي قائمة منهم يجب في المقابل أختيار أي قائمة من القوائم الأخري لتصغيرها بنفس النسبة .
و الأن قم بالدخول علي مدونتك وأختر من القائمة " تصميم " ومنها أختر " تحرير html " .
ثم قم بتوسيع القالب وبعد ذلك قم بأخذ نسخة احتياطي من القالب حتى إذا حدث خطأ في التعديل يمكنك استعادة القالب كما كان ولمن لا يعرف كيف يأخذ نسخة من المدونة أقول له أن الأمر بسيط وكل ماعليك فعلة بعد توسيع القالب بوضع علامة " صح " داخل المربع الصغير علي يمين صندوق الأكواد

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

وبعد أخذ النسخة من القالب قم بالدخول علي صندوق الأكواد ثم أبحث عن الأكواد الأتية :
بالضغط علي كنترول + حرف f ستظهر لك أداه بحث قم بكتابة أو نسخ أسم الكود بها ثم أضغط انتر ستقوم هذه الأداة بالبحث عن أسم الكود تلقائيا .
ونبدأ الآن بالتعديل علي أكواد المدونة الخاصة بتكبير وتصغير القوائم :
و لتعديل حجم مكان كتابة " المواضيع post " والأن قم بكتابة أسم الكود التالي #main-wrapper { داخل أداة البحث و كما ذكرنا أن هذا الكود خاص بالتحكم في حيز " post " الخارجي وهو المكان الخاص بعرض رسائل المدونة .
وسأقوم بشرح الرمز ومعناه المقابل له .
فنبدأ

صورة توضيحية من داخل القالب لكود منطقة الرسائل بالمدونة " post "



وهذا هو الكود الرئيس المتحكم بحجم الكود الخارجي لوجود كلمة " –warpper " وتعني الحيز الرئيسي :
#main-wrapper
تفسير رموز الكود :
#main-wrapper { ــــ أسم الكود ومعناه الحرفي " الحيز الخارجي أو المجمع الرئيسي "
float: left; ــــ أتجاه الكود وتعني وجودة علي يمين أو يسار المدونة
width: 486px; ـــــ حجم الكود " بالبكسل " يمكنك أن تزيد أو تقلل الأرقام حسب حجم العرض المطلوب لمدونتك مع التقيد بأحجام الأكواد المجاورة كما ذكرنا .
margin: 0px 0px 0px 0px; ـــــ الفراغ بين الكود وجسم المدونة الخارجي " غير مهم "
padding: 0px 0px 0px 0px; ـــــــ الفراغ بين جوانب حشو الكود نفسه " غير مهم "
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

هنا أنتهينا من القسم الأول الخاص بكود البوست أو المكان الخاص بعرض رسائل المدونة .

القسم الثاني الخاص بالكود :
وهو الكود النائب وهو المتحكم بمساحة الكود الداخلية :
وهنا سنتعرف علي الحشو الداخلي وهو أنك عندما تقوم بكتابة موضوع ونشرة ستجد بداية ونهاية لسطور الموضوع وهذا يسمي بالحشو الداخلي وهذا الكود خاص بحجم " post " من الداخل .
#main
#main { ــــــــــــــــ تعني الحجم الداخلي أو الحشو .
width: 476px; ــــــــــــــــ للتحكم بحجم ال "post " من الداخل يمكنك زيادة أو تقليل الرقم ولكن يجب أن لا يزيد عن حجم الكود بالأعلى .
margin: 4px; ــــــــــــــــ الفراغ بين جوانب " غير مهم " .
padding: 20px 0 0 0; ــــــــــــــ " غير مهم " .
color: $textColor; ــــــــــــــــ" غير مهم " .
font: $textFont; ــــــــــــــــــ" غير مهم " .
background: $postbgColor; ــــــــــ" غير مهم " " غير مهم " .
border: 1px solid $postBorderColor; ــــ " غير مهم " .

وهنا نكون قد أنتهينا من قائمة " post "
أما بالنسبة للكود الخاص بحجم القائمة الجانبية فتجد كلمة " side " معناها" جانب" :
و بالنسبة للقوائم الجانبية فيمكن أن تجد في المدونة أكثر من قائمة جانبية مرقمة بالتسلسل 1 و 2 و 3 , و في هذه الحالة يتم التعامل معها بنفس الطريقة المتبعة ستجد كود رئيس وكود نائب في كل قائمة , والأن مع القائمة الجانبية .

صورة توضيحية لشكل الكود الرئيس للقائمة الجانبية داخل القالب :


#side-wrapper1
وهو الكود الرئيس لوجود كلمة " –warpper "
#side-wrapper1
#side-wrapper1 { ـــــ أسم الكود و معناه مجمع القائمة الجانبية .
width: 156px; ـــــ لتتحكم في حجم القائمة بمعني العرض وليس الطول .
float: left; ـــــ لتغيير أتجاه وجود القائمة هل هي يمين أم يسار المدونة .
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

هنا انتهينا من القسم الأول الخاص بكود القائمة الجانبية .

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

#sidebar1
#sidebar1 { ــــــــــــــــ أسم الكود .
width: 152px; ـــــــــــــــ قم بتقليل أو زيادة حجم حشو القائمة الجانبية من الداخل ويجب أن لا يزيد عن حجم الكود الرئيس أعلاه .
margin: 4px 0px 0px 4px;ــــــــ"غير مهم "
padding: 0px 0px 0px 0px; ـــــــ"غير مهم "
color: $sidebar1TextColor; ـــــــ"غير مهم "
line-height: 1.8em; ــــــــــــ"غير مهم "


وهنا نكون قد أنتهينا من القائمة الجانبية

الشرح ييميل للمبتدأين فلا تؤاخذوني بأي كلمة توضيحية ذكرتها لشرح الأكواد

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

تمت بحمد الله


هذا الموضوع خاص بمدونة الحبوني بتاريخ 8/ أغسطس / 2011 . يمكنك نقل أي موضوع من المدونة بشرط ذكر المصدر وذكر رابط الموضوع الأصلي .






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

شريف الصيرفي يقول...

مشكور أخي لكن هل ممكن دعم فني خاص . ؟ ومستعد ادفع لك ؟

Elhapony يقول...

أخي الكريم شريف الصيرفي يمكنني مساعدتك بدون مقابل ... أسال وسوف أجيبك بأمر الله .

shehab elden يقول...

الصفحة الرئيسية قائمةالمواضيع لم يتغير حجمها كما هنا
www.al-mawso3a.com
فكيف اجعلها مناسبة؟

shehab elden يقول...

اخي طبقت الشرح الرااائعو ولكن عندى في الصفحة الرئيسية قائمة المواضيع لا استطيع تكبيرها حتى تتوافق مع حجم الموقع الآن
هذا هو موقعى : http://www.al-mawso3a.com/

غير معرف يقول...

يسلموووووو عنجد استفدت كثيير منك

Bat imad يقول...

شكرا جزيلا أخي

http://ma3lo-1ma.blogspot.com

محمد طاهر " مشرف مدونة الحبوني " يقول...

مرحبا shehab elden احيانا توجد انواع قوالب لا يمكنتغيرر احجامها وان قمت بزياره موقعك فو متناسق وانصحك ان لا تغير به شيئا

غير معرف يقول...

السلام عليكم
أخي الكريم أريد منكم زيارة موقعي لكي تقوم بتقديم النصائح والخطوات التي يجب ان أتبعها في اضافة سيدبار على اليسار بحيت موقعي يتوفر فقط على عمود في اليمين وجزاكم الله خيرا
اسم موقعي هو موقع ثليجة
www.tlija.com
وشكرا

محمد طاهر الحبوني يقول...

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

غير معرف يقول...

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

محمد طاهر الحبوني يقول...

لا اعلم مدي معرفتك بتعديل القوالب ,انا اقوم بتعديل قوالب مدونات بلوجر فلا اعلم هل يمكنك ارسال القالب لي و سوف اري ان كان يوجد امكانية لتعديلة فساقوم بذلك

غير معرف يقول...

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

موقع ثليجة : كل ما يخص المرأة العربية في بيتها مع أطفالها و زوجها يقول...
أزال المؤلف هذا التعليق.
محمد طاهر الحبوني يقول...

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

غير معرف يقول...

أتمنى أخي في أقرب وقت ممكن لو سمحت

محمد طاهر الحبوني يقول...

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

غير معرف يقول...

حسنا يا أخي الكريم
فان كان الأمر كدلك سوف أنتضر حتى تقوم بتعديله
وشكرا

محمد طاهر الحبوني يقول...

وهو كذلك ابشري بخير ان شاء الله

أخبار ريال مدريد بالعربية يقول...

شكرا لك اخى

علاء الدين كمال يقول...

شكرا اخى

سياسة الخصوصية