تاريخ نشر : 08‏/09‏/2012

تحويل قالب بلوجر إلى صفحة HTML فارغة


دائما يكون هناك خطأ طفيف في نتائج أكواد البرمجية في رسائل الخطأ التي تراها مرعبة في كثير من الأحيان أثناء تحرير القالب المدونة. من أجل فهم كيفية تصميم وبرمجة هذه القوالب. عليك أن تبدأ من الصفر. كنت أخطط لمشاركة بعض القوالب الشبكة وعرض القائمة ولكن الجدول الزمني للأعمال الصعبة يجعلني من الصعب أن تفعل ذلك. ومع ذلك أنا اليوم أشارك كود بسيطة من شأنه أن يحول هيكل قالب XML  مدونتك إلى صفحة HTML فارغة مع عدم وجود الأدوات  (الشريط الجانبي, هيدر, فوتر...ألخ ). القالب Blogger بأكمله يتكون من الحاجيات والأدوات التي يتم تشغيلها وإدارتها باستخدام معرفات (IDs) و أصناف (classes). قسم مواضيع المدونة نفسه هي القطعة العملاقة التي يمكن تشكيلها بطرق مختلفة. لجعل الأمور بسيطة وسوف أشارك اليوم كيفية إنشاء صفحة HTML فارغة من قالب بلوجر ومن ثم البدء في إضافة  الأدوات  إليها لتجربة طرق جديدة مثيرة للتخصيص طريقة العرض المدونة.

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

1- إذهب إلى لوحة التحكم الرئيسية Blogger
2- إنشاء مدونة اختبار جديد
3- إعطائها عنوان و عنوان URL

4- اختيار قالب بسيط وليس الديناميكية
5- انتقل قالب > تحرير HTML> المتابعة
6- استبدال كافة الأكواد داخل المحرر مع الأكواد التالية:
<?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 : Stupcomp  ////////////////////////////////////////////////////////////
/////////////////////// DOWNLOAD FROM: www.Stupcomp.blogspot.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; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.fb.me/youness.abarrou'>Abarrou</a>&#169; 2012.</p></center>
</div>
  </body>
</html>
7. انقر فوق حفظ وعند المطالبة حول الخطأ التالي:

تحذير: لا يشتمل نموذجك الجديد على الأدوات التالية:

  • Header1
  • Attribution1
  • Blog1
هل تريد بالتأكيد الاحتفاظ بهذه الأدوات في مدونتك أو حذفها؟
لا يمكن التراجع عن حذف الأدوات.
ببساطة انقر على حذف الأدوات وها أنت انتهيت!

نقاط هامة:
  • أثناء إنشاء الأدوات، سوف تقوم بإضافة جافا سكريبت أسفل   <head> أو أعلى   </head>
  • وسوف تقوم بإضافة كود CSS داخل أقسام المشيرة باللون الاصفر
  • وسوف تقوم بإضافة معلومات القطعة أو كود HTML داخل جسم  العلامتين الخضراء
ما لا يمكنك أن تفعل؟

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

إنشاء القطعة مواضيع المدونة [Blog Post]

الآن لإعطائك فكرة عن مدى سهولة إمكانك تصميم قالب بلوجر من الصفر ببساطة إضافة الأكواد التالية مباشرة فوق </body>  لإنشاء قطعة مواضيع المدونة فى قالب HTML ثابت الخاص بك .
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
حفظ القالب ثم قم بزيارة الصفحة تخطيط مرة أخرى. سوف تكون قادرا على رؤية القطعة مشاركات المدونة ويمكنك الآن بسهولة تحرير خيارات التنسيق الخاص به.اذهب وإنشاء مشاركة جديدة وزيارة مدونتك لرؤيتها تعمل على ما يرام.تهانينا! لقد أنشأت واحدة من أول الأدوات بلوجر الخاصة بك . تلعب بهذه الطريقة مع بعض الأدوات الجديدة والمثيرة ومعرفة كيف يمكن أن تبديع في تصميمها .من خلال تحويل القالب إلى نسخة ثابتة، يمكنك الآن بسهولة إنشاء صفحات الويب HTML. و تحويل مدونة بلوجر إلى موقع ويب

قم بزيارة هذا رابط أدناه لفهم أكتر عن الأساسيات tags.
قراءة: Layouts Data Tags

وأوصي أيضا باستخدام Codelobster لتصميم صفحات الويب على سطح المكتب أو مضيف محلي

إذا كنت بحاجة إلى أي مساعدة، لا تتردد في تعليق و شكرا :)

هل يعجبك هذا؟

إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

إشترك في النشرة البريدية للحصول على آخر المواضيع


تابعنا في اليوتيوب

تابعنا على الفيس بوك