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

اعلانك هنا

By Unknown - 21:05

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

باسم الله الرحمن الرحيم

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

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

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

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

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

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

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

<?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' http-equiv='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.Bengeek.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.bengeek.com'>المدون المهووس </a>© 2012.</p>
</center>
</div>
</body> 
</html>

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

Warning: Your new template does not include the following widgets: BlogArchive1 Profile1 Attribution1 Header1 Blog1

نقاط هامة:

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

ماذا بعد ..؟؟

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

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

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

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

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

آرائكم:

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