الخميس، 27 أغسطس، 2009

تصميم وتعديل قوالب بلوجر: الصناديق والعنــــــاصر التي تتكون منهــــــــا أكواد قوالب بلــــــوجر. (6)

تصميم وتعديل قوالب بلوجر: الصناديق والعناصر التي تتكون منها أكواد قوالب بلوجر. (6)
في موضوع سابق تحدثنا عن البنية الأساسية لأكواد بلوجر ، وتحدثنا بشكل عام وفيما يلي سنعيد الحديث عن نفس الأمر لكن بتفصيل أكثر بحي سنتجاوز مجرد التعريف بالعناصر والاجزاء إلى ذكر بعض الأكواد التي تندرج تحتها وع ذكر وظائفها
لذلك سنشير مجددا إلى أهم الصناديق والعناصر التي يتكون منها قالب بلوجر، مع بيان وأدوارها ووظائفها ، وقبل ذلك لنتفق على أن العناصر هي أصغر حجما من الصناديق، والعنصر في الغالب يقع ضمن صندوق اكبر منه، فالصندوق إذن يمكن أن يحتوي على أكثر من عنصر .

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

أولا يجب أن نعلم أن الرمز # و النقطة (.) يظهران قبل بداية أكواد عنصر او صندوق معين وفيما يلي أهم الصناديق مع أهم العناصر التي تندرج تحت كل صندوق : .

Global : وتندرج ضمنه الأجزاء التالية:

الخصائص العامة لمجمل القالب : Body{…}

بداية أكواد الصندوق الأكبر الذي يضم كامل محتويات القالب : #outer-wrapper {….}

ويحتوي على العمود الجانبي، ومنطقة النشر، والمنطقى السفلى لمنطقة النشر : #content-wrapper {…}

{…} a : ويتحكم في خصائص الروابط .

ويتحكم في خصائص الروابط التي تم الضغط عليها. : a:visited{…}

ويتحكم في خصائص الروابط عندما يكون مؤشر الفأرة فوقها : a :hover{…}


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

الرأس : Header . : وتندرج ضمنه الأجزاء التالية

header-wrapper # : ويدل على بداية أكواد الصندوق الذي يتحكم في كل منطقة الرأس header. ويشمل اسم المدونة، ووصف المدونة .

header# : وهو صندوق يقع بدوره ضمن الذي سبقه .

header h# : واكواده تتحكم في مظهر عنوان أو اسم المدونة.

header h1 a # : ويتحكم في عنوان المدونة باعتباره رابطاlink.

#header description : تتحكم في خصائص وصف المدونة.

header a img# : يتحكم في خصائص الصورة في منطقة الرأس .

الجزء الرئيسي : Main : وتندرج ضمنه الاجزاء التالية:

main-wrapper#: وهو الصندوق الذي يحيط بتاريخ التدوينات، ومنطقة المحتوى أو النشر، والتعليقات ، والخلاصات ، وأي قطعة أو جزء تتم إضافتها فوق أو أسفل منطقة النشر او المحتوى blog post

#main : وهو صندوق يقع ضمن الذي قبله .

main.widget# : ويتحكم في في كل القطع والأجزاء التي تقع ضمن .main-wrpper

h2.date-header : يتحكم في خصائص تاريخ التدوينات .

post. : وهي مسبوقة بنقطة يتحكم في خصائص منطقة المحتوى – النشر- blog post .

Post h3. : يتحكم في خصائص عناوين التدوينات.

post body p. : يتحكم في خصائص جسم ومحتوى التدوينات .

post ul. : يتحكم في تنسيق القوائم غير المرقمة .

post ol. : يتحكم في تنسيق القوائم المرقمة.

a img : يتحكم في الخصائص العامة للصور.

العمود الجانبي : Sidebar : وتندرج ضمنه الأجزاء التالية:

sidebar-wrapper. : ويحيط بكل العناصر التي يتكون منها العمود الجانبي .

sidebar. : صندوق يتواجد داخل الذي قبله.

sidebar1 # : يتحكم في خصائص العمود الجانبي الأول في حال وجود أكثر من عمود.

sidebar2 # : يتحكم في خصائص العمود الجانبي الثاني ، مع التنبيه إلى أنه أذا أردت ان تجعل كل الأعمدة متشابهة ، فيمكنك أن تتحكم في خصائصها مجتمعة من خلال العنصر الأول وهو .sidebar

.sidebar .widget : تتحكم في خصائص كل الأجزاء التي يتكون منها العمود الجانبي – "إضافة أداة ".

sidebar1 .widget. : تتحكم فقط في خصائص العمود الجانبي رقم 1.

sidebar .blogArchive. : يتحكم في خصائص الأرشيف الموجود في العمود الجانبي . ويستحب ترك خصائصه كما هي افتراضيا وعدم تغيير أي شيء فيها .

sidebar h2 . : يتحكم في خصائص عناوين أجزاء العمود الجانبي.

.sidebar #blogArchive1 h2. : يتحكم في عنوان الأرشيف.

Miscellaneous : ذكرنا أن هذا الجزء يضم ملف التعريف أو البروفايل و bockauote ، والأكواد التي تندرج ضمنه هي :

profile1 # : ويتحكم في خصائص " من أنا" about me

#profile1 h2 : يتحكم خصائص عنوان ملف التعريف " من أنا".

Profile-img a img : يتحكم في خصائص الصورة المرفقة بـ " من أنا" إن وجدت .

Profile-textblock :يتحكم في خصائص النص الذي يعرف به المدون نفسه في قسم ملف التعريف "من أنا" .

Blockauote: يتحكم في خصائص النصوص التي يضعها المدون بين مزدوجتين "..."

Post-footer : ويحتوي على الأكواد التالية :

post-footer. : يتحكم في كل خصائص أسفل التدوينات والمواضيع.

post-footer-line. : يتحكم في خصائص كل سطر جديد في هذه المنطقة.

Post-footer a : يتحكم في خصائص الروابط في هذه المنطقة.

Post-footer .post-comment-link a : يتحكم في روابط التعليقات.

blog-pager# : يتحكم في خصائص " رسالة جديدة" و "الصفحة الرئيسية" و "رسالة أقدم" التي تتواجد في صف واحد أسفل منطقة المحتوى .

blog-pager-newer-link# : يتحكم في خصائص رابط " رسالة أقدم".

.blog-pager-older-link# : يتحكم في خصائص رابط "رسالة أقدم".

feed-links. : يتحكم في العبارة التي تكون أسفل كل تدوينة وهي عبارة " اشترك في الرسالة" .

التعليقات : comments :وتندرج تحته العناصر التالية:

comments# : ويتحكم في كل خصائص العناصر المكونة لصندوق التعليقات .

comments a# : يتحكم في خصائص الروابط .

comments h4 # : يتحكم في رأس header صندوق التعليقات.

comments author. : يتحكم خصائص كتابة أسماء المعلقين.

comment-body p . : يتحكم في خصائص جسم body منطقة التعليقات .


Footer ويحتوي على العناصر التالية:

footer-wrapper # : وهو يحيط بكل العناصر التي يتكون منها "الفوتر" .

footer #: ويقع ضمن الجزء الذي قبله .

footer h2 # : يتحكم في خصائص عنوان الفوتر .

footer .widget # : يتحكم في الأجزاء أو الإضافات التي توجد في الفوتر .

footer a . : يتحكم في خصائص النصوص الموجودة في الفوتر.

الآن أصبحت على معرفة بأهم الصناديق أو الأجزاء المكونة لقوالب بلوجر ، كما أصبحت تعرف أهم العناصر التي يتكون منها كل صندوق ، والاكواد الدالة عليها ووظائفها . المزيد في الحلقة المقبلة بإذن الله .

12 التعليقات:

فوضى عارمة 27 أغسطس، 2009 9:53 م  

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

frindconnect
ادوات اقتراحات الاعضاء

هل يمكنك بردلتي على eqraa11@gail.com
مشكور

عمر 27 أغسطس، 2009 11:47 م  

مرحبا أخي فوضى عارمة
لإضافة أزرار المفضلات الاجتماعية يمكنك الاطلاع على الموضوع التالي في مدونة ذؤيب
www.doaib.blogspot.com/2009/08/blog-post_17.html

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

عمر 28 أغسطس، 2009 12:06 ص  

بالنسبةGoogle Friend Connect ما زالت تجريبية وليست متاحة لكل المدونات
على العموم فضافتها إلى مدونات بلوجر اتبع المسار التالي:
تخطيط + إضافة اداة + التابعون

كما يمكنك الستفادة من الروابط التالية :

http://miolog.com/new-media/google-friend-connect/

http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=141483

فوضى عارمة 28 أغسطس، 2009 12:16 م  

مشكور اخي
يقول اخونا ذئيب انه يجب اضافة الرمز اسفل
div class='post-footer-line post-footer-line-1'

لكن في مدونتي لا يوجد هذا الرمز بل الرمز ادناه , ولا يمكن اضافته ادناه

p class='post-footer-line post-footer-line-1'

temo 2 سبتمبر، 2009 8:26 م  

مشكور اخى الكريم على مشاركتنا معلوماتك عن قوالب البلوجر ..... خالص تحياتى

عمر 3 سبتمبر، 2009 1:00 ص  

شكرا على الزيارة المزيد من المعلومات قادمة بإذن الله

عمر 3 سبتمبر، 2009 4:39 م  

سلام أخي فوضى عارمة
ربما افادك الرابط التالي :

http://blogger-lu2a.blogspot.com/2009/09/blog-post.html

S H A D O W 29 سبتمبر، 2009 8:57 م  

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

عمر 30 سبتمبر، 2009 12:38 ص  

ربما تجدين بغيتك في التدوينة التالية

http://tadween-guide.blogspot.com/2009/07/blog-post.html

وبالتوفيق

badr0266 8 يناير، 2010 12:38 ص  

أخي العزيز أريد إضافة في نهاية الصفحة الرئيسية
أي بعد أخر رسالة في الصفحة الرئيسية كما هو موجود لديك ، أي الصفحة 2،3 الصفحة الأولى، الصفحة الأخير...
وسوف أكون لك من الشاكرين

غير معرف 26 يناير، 2010 12:16 م  

يعطيك العافية
مدونة الجوال
http://dale3jawalk.blogspot.com

electro_ibra 18 أبريل، 2011 11:28 م  

اخي ممكن مساعدة لو سمحت لدي قالب اردت ان اعربه وادخل عليه بعض التحسينات لكن فشلت اداكان احد ممكن ان يساعدني هدا ايميلي ارجو مراسلتي electro_ibra@hotmail.fr

إرسال تعليق

أحدث الموضوعات

أحدث التعليقات

عن المدونة

المرشد الأمين إلى عالم التدوين
مدونة تهتم بالتدوين من الناحية التقنية- إنشاء المدونة، ضبط إعدادات المدونة، النشر ، القوالب و طرق تحميلها وتعديلها - ومن الناحية الموضوعية - كيفة الكتابة وتقنياتها، على بلوجر .

الزوار

  © Blogger template 'Ultimatum' by Ourblogtemplates.com 2008

Back to TOP