قالب ExpressNews معرب

يعتبر قالب ExpressNews من بين أفضل القوالب المعربة، و هو متوافق مع جميع المتصفحات
و يحتوي على إضافات مميزة منها:

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

معاينة الصفحة الرئيسية: 

معانية صفحة التدوينات: 

تحميل القالب: 

اضغط هنا.

إذا كانت لديكم أية أسئلة بخصوص القالب، أو واجهتكم أي مشاكل... فنحن رهن الإشارة

فقط أتركوا لنا تعليقاتكم أو استفساراتكم و إن شاء الله نجيبكم بأسرع ما يمكن. 

اقرأ المزيد

اتصل بنا بشكل مبسط و جميل

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

الخطوة الأولى: إضافة أداة "اتصل بنا" إلى المدونة.
سجل دخولك إلى بلوجر ثم اذهب إلى [ تخطيط ] و في القائمة الجانبية نضغط على إضافة أداة، 
و سوف تفتح لك نافذة جديدة و على اليسار نضغط على المزيد من الأدوات تم نموذج الاتصال (كما توضح الصورة أسفله).

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

الخطوة الثانية: إنشاء صفحة "اتصل بنا".
الآن نصغط على [ الصفحات ]، تم صفحة جديدة (كما توضح الصورة أسفله).
و يمكنكم تسميتها "contact us" ، "contact" أو "page de contact" أو كما تحبون....

نضغط على HTML (كما تبين الصورة الآتية).

ثم نلصق هذا الكود أسفله كما تبين الصورة السابقة.

<div id="contact_wrap"><h3>Formulaire de contact</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Nom" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Envoyer" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form></div><style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style></div>

ثم نضغط على " نشر " في أعلى الصفحة على يسارك.

الخطوة الثالثة: تطبيق أكواد CSS. 

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

و هناك نموذجين، [نموذج بألوان خفيفة] و [نموذج بألوان غامقة]. اضغط على اسم النموذج للمعاينة.

الآن نذهب [ قالب ] ثم [ تحرير HTML] 

و باستعمال المفتاحين Ctl+F نبحث على الوسم ]]></b:skin> ثم نلصق قبله مباشرة أكواد CSS الموافقة للنموذج الذي تريدونه. 

ملحوظة للتوضيح أكثر:

يتم إضافة أكواد النموذج قبل وسم إغلاق أكواد CSS في قالب المدونة.

أكواد CSS الخاصة بالــ [نموذج بألوان خفيفة]

#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6cfnTBGOXYjbdI6JUO6S0Kz2PYcMF2uuVCnZFWKqCNnpwM4KgromLUWjQ-KCxG50avw4pzmxfuRd5o7Z2CzLE7UnAYGJNbNP4ePgoCvDswArLUvDX3PFRtua8ky83cdIvVH-mL0itBU/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzU06SzyzA3y_Zh3dL-95w2g_f29-uHvstKXCN0pqQi-mU48JXtsl17X4c8yzNUPAD1MYdvjgvB5Ota6yVQfohrvNSGGY6cmJEtIgaETFSwjasxZArXtdfEjlTow-lhzZq_i8xB32tsO4/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtB-TwBmN6l5QbDNTqwzxcRjCMQo8TRDKDlZcXsmUla97NRSQr3AuP2brF771ktglBbF6JTI4BJfIehVAamH0YIgnMoTA1WnYtoOIz3ARaRpoykwX2eiBzO5Co59viM98Sdy1E-wQ7aBY/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}

أكواد CSS الخاصة بالــ [نموذج بألوان غامقة]

#ContactForm1{display:none;} #contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border: #600 solid 1px;border-bottom: #420000 solid 1px;background-color:#983738;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);}#contact_wrap h3{color: #fff;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #3b5931;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;background-color: #659156;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #000 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #000;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6cfnTBGOXYjbdI6JUO6S0Kz2PYcMF2uuVCnZFWKqCNnpwM4KgromLUWjQ-KCxG50avw4pzmxfuRd5o7Z2CzLE7UnAYGJNbNP4ePgoCvDswArLUvDX3PFRtua8ky83cdIvVH-mL0itBU/s1600/user.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzU06SzyzA3y_Zh3dL-95w2g_f29-uHvstKXCN0pqQi-mU48JXtsl17X4c8yzNUPAD1MYdvjgvB5Ota6yVQfohrvNSGGY6cmJEtIgaETFSwjasxZArXtdfEjlTow-lhzZq_i8xB32tsO4/s1600/pen.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdEQlYx_U2deWwHpWEUAx9t2sHC_QdjJMvMKwf4Uws-zNJQaKHOsLaB9l13pkwDY5qdQYnUqCNChpn_c_PswMU5tqFyr-MA0R2abExz1c1h-1HXMPKYoqk9Z1FaWo8fx051cvwyEDwYbM/s1600/msg.png)no-repeat 10px 10px; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #659156;border:1px solid #333;}#ContactForm1_contact-form-submit:hover {background:#5d894d;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}

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

اقرأ المزيد

نموذج قالب بلوجر، أقل ما يجب أن يكون

تريدون إنشاء نموذج بلوجر انطلاقا من صفحة بيضاء.
لديكم معرفة مسبقة باللغتين HTML و CSS ؟ هذا جيد إذا.
لديكم أيضا إلمام بلغة XML بلوجر. و هذا أيضا جيد.
إذن أنتم جاهزون لبدء هذا التحدي الجديد.





الأكواد المطلوبة في قالب بلوجر:
الكود أسفله هو الحد الأدنى المطلوب لبدء كتابة نموذج جديد لقالب بلوجر.
نوع المستند "doctype" و الوسوم المعتادة <head> و <html> و <body> هي كلها أشياء مطلوبة بالنسبة لهيكلة قالب بلوجر.
أما بالنسبة لوسوم XML بلوجر، و وسوم تخطيط الصفحات فهي ضرورية:

<b:skin>: 

• و هو وسم إغلاق خصائص المتغيرات أو ملفات CSS.
• و يجب أن يكون داخل وسم <head>.
• الوسم <style> لا يجب أن يتم الإشارة إليه.

<b:section>: 

• و هي المنطقة التي يتم فيها تحديد مجموعة من الأدوات. 
• و يجب دائما أن يتوفر قالب بلوجر على الأقل على "<b:section>" واحدة و التي ستسمح لنا بإضافة الأدوات باستعمال الخاصية: : showaddelement='yes'
• كما يجب دائما أن تكون "<b:section>" داخل <body>.

<b:widget>

• و هو الوسم الخاص بالأدوات. 
• أداة واحدة، و من الأفضل أن تكون الأداة التي تحتوي على التدوينات: Blog1. 
• الوسوم <b:widget/> يجب أن تكون داخل <b:section/>

ملف XML:

Le fichier XML

CODE XML MINIMUM

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
    <!-- DÉBUT DE L'ENTÊTE -->

    <!-- EMPLACEMENT 1 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <b:skin><![CDATA[

      /* EMPLACEMENT CSS */

    ]]></b:skin>

    <!-- EMPLACEMENT 2 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <!-- FIN DE L'ENTÊTE -->
  </head>
  <body>
    <!-- DÉBUT STRUCTURE HTML -->

    <!-- AU MOINS 1 B:SECTION & 1 B:WIDGET REQUIS -->
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>
    </b:section>

    <!-- FIN STRUCTURE HTML -->
  </body>
</html>

اقرأ المزيد