معهد خبراء بلوجر - كيف تغير قالب البلوجر العادي إلى صفحة بيضاء لتصميم قالب جديد

السلام عليم و رحمة الله و بركاته
باسم الله الرحمن الرحيم

http://2.bp.blogspot.com/-Xzy2ZAJRs5...ge%5B15%5D.png

يتم ترميز القوالب بلوغسبوت باستخدام "XHTML 1.0 Strict Document Type" . تم تطويرها من قبل اتحاد شبكة الويب العالمية في 26 يناير 2000. على عكس "PHP" أو "ASP.net" فقواعد "XML" صارمة ولا ترحم . وهناك خطأ طفيف في نتائج التعليمات البرمجية في رسائل الخطأ التي تراها مرعبة في كثير من الأحيان أثناء تحرير القالب المدونة . من أجل فهم كيفية تصميم وبرمجة هذه القوالب. عليك أن تبدأ من الصفر...

المهم سأشارككم اليوم كود بسيط يمكنك من تحويل مدونتك "[COLOR="rgb(46, 139, 87)"]المجربة[/COLOR]" (بالطبع قلت مجربة لأنك ستقوم بتجربة فقط ...) إلى هيكل فقط، فارغة من دون أية أداة، و بالتالي الإبداع يصبح من مِلكك :) و بهذا يمكنك عمل ما تشاء فيها...
كما نعلم أن قالب المدونة يتكون من الأدوات التي يتم تشغيلها وإدارتها باستخدام (المعرفات :" ID " والطبقات: " Class " ). لجعل المور سهلة سأريك اليوم كيف تقوم بصنع صفحة " HTML " فارغة من قالب المدونة ومن ثم البدء في إضافة الأدوات إليها حسب الحاجيات الشخصية...

معاينة الصفحة

كيف يتم عمل هذا..؟؟

صفحة الـ " HTML " العادية تحتوي على الوسوم التالية : " HEAD " ، " HTML " و " BODY " على التوالي . الميتا تاغ ، الجافاسكريبت و أنماط الـ" CSS " دائما ما تضاف في داخل القسم " HEAD " و داخل قسم الـ " DIV" أو محتوى داخل قسم الـ " BODY" . في البلوجر منذ برمجة القالب تلقائيا من خلال ديناميكية أقسام " b:section " لذلك نحتاج أولا إلى إزالة كافة الأقسام وترك واحدة فقط لأن وسم العلامات XML يتطلب وجود على الأقل على قسم واحد من هذا القبيل. لتبسيط العملية لقد قمت بعمل " صفحة HTML ثابتة " . يمكنك استخدام هذا 'الثيم' للعب بالأدوات و التعديل عليها كما تريد، لزيادة مهاراتك الشخصية و تطويرها. سوف تحب العمل على ذلك لأنه يوفر لك تجربة ممتعة و يمكنك العمل عليها في محرر الـ" HTML " خاصتنا.

خطوات تثبيت هذا الثيم :

الذهاب إلى لوحة التحكم الرئيسية
إنشاء مدونة جديدة للإختبار
إعطائها إسم وعنوان
اختيار قالب بسيط وليس "القالب الديناميكي"
ومن ثم اضغط على " Template " > تحرير HTML > و Proceed
وبعد ذلك قم حذف الكود كامل من داخل المحرر واسبدله بالكود بالأسفل

كود بلغة HTML:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='IE=EmulateIE7' **********='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- ////STATIC HTML THEME///////////////// ////CODED BY : Mohammad Mustafa Ahmedzai//////////////// //// DOWNLOAD FROM: www.MyBloggerTricks.com ////////////////////////////////////////////////// ----------------------------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none } body { font: $(body.font); color: $(body.text.color); background: $(body.background); padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); $(body.background.override) margin: 0; padding: 0; } ]]></b:skin> </head> <body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> <div style='margin-top:400px; '>  <center> <p> <a href='http://www.pro-stats.blogspot.com'>My Blogger Tricks </a>© 2012.</p> </center> </div> </body> </html>

7-انقر على حفظ القالب وعند ظهور الخطأ التالي: فقط اضغط على Delete widgets و تكون قد انتهيت...!!!

https://lh5.googleusercontent.com/-i...-13_204228.jpg

نقاط هامة:

أثناء إنشاء الأدوات، سوف تقوم بإضافة جافا سكريبت أسفل <HEAD> أو أعلى </ HEAD>
وسوف تقوم بإضافة رمز CSS داخل أقسام <b:skin><![CDATA[/* أو أعلى ]]></b:skin>
وسوف تقوم بإضافة بيانات القطعة أو رمز HTML داخل وسم <BODY>
ماذا بعد ..؟؟

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

إنشاء قطعة رسائل المشاركة...

الآن لإعطائك فكرة عن مدى سهولة تصميم قالب البلوجر من الصفر ببساطة إضافة الكود التالي فقط فوق </ BODY> لجعل قطعة رسائل المشاركة داخل قالبك..

كود بلغة HTML:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>

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

إقرأ : تخطيطات بيانات الوسوم

آرائكم:

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

مصدر الموضوع تقنيات و أخبار