نجوم مصرية
منتديات نجوم مصرية منتدى المدونين واصحاب المواقع منتدى المدونين والتدوين



تابع نجوم مصرية على أخبار جوجل




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

 

... بسم الله الرحمن الرحيم ...
توجد بعض القوالب تكون متناسبة مع مدونة معينة من حيث الشكل و لكنها غير مناسبة له من حيث أحجام وعدد القوائم وب يلجأ صاحب المدونة إلي تغيير القالب لأنة يريد مثلا قوائم جانبية بحجم أكبر من الموجودة بمدونتة أو أنة يريد " 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 " وهو المكان الذي تظهر به رسائل المدونة سيكون ك :
تابع نجوم مصرية على أخبار جوجل








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






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

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


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

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

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



شرح كود إضافة 3 أعمدة في الفوتر لمدونات بلوجر




شرح كود إضافة 3 أعمدة في الفوتر لمدونات بلوجر

المصدر: http://adsenseobs.blogspot.com/2012/...g-post_09.html
جميع الحقوقه محفوظه لمدونة ملوك ادسنس









المقال "شرح تغيير حجم البوست و القوائم الجانبية في بلوجر" نشر بواسطة: بتاريخ:



اسم العضو:
سؤال عشوائي يجب الاجابة عليه

الرسالة:


رابط دائم

مواضيع مشابهة:
تغيير لون التظليل في مدونات بلوجر
مدونة المحررون العرب : دروس بلوجر ، هاكات مدونات بلوجر ، اضافات بلوجر، اشهار
سلسلة قوالب بلوجر 2011 | قالب Love Time لمدونات بلوجر
حصريا تغيير ايقونة مدونة بلوجر favicon بدون مشاكل

Powered by vBulletin Version 3.8.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd
جميع الحقوق محفوظة © fmisr.com منتديات نجوم مصرية