مدونة بلوجر

كيفية إزالة أداة تدعمه بلوجر

2017-04-30T11:19:00.000-07:00

تحتوي قوالب بلوجر على أداة تسمى " تدعمه بلوجر" "Powered by Blogger" في تخطيط النموذج الافتراضي.

ولا يمكن إزالة الأداة ببساطة لأنها مقفلة افتراضيا.

و لإزالتها، يتوجب علينا فتح هذه الأداة و هذا شيء في غاية السهولة.

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

كيفية إزالة أداة "Powered by Blogger".

سوف نقترح عليكم طريقتين لإزالة هذه الأداة و هما:

الطريقة الأولى:

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

و إليكم الخطوات التي يجب تنفيذها من أجل ذلك.

إذهب إلى لوحة تحكم مدونتك.

1- المظهر.
2- تحرير الـــHTML.
3- ثم نبحث عن </head>... يمكنكم استعمال (Ctrl +F) من أجل البحث في القالب.

4- ثم نضيف الكود التالي أسفل الـــ </head>

<style>
#Attribution1 {
display: none;
}
</style>

5- ثم قم بحفظ القالب.

الطريقة الثانية:

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

و إليكم الخطوات التي يجب تنفيذها من أجل ذلك.

إذهب إلى لوحة تحكم مدونتك.

1- المظهر.
2- تحرير الـــHTML.
3- ثم نبحث عن الكود أسفله... يمكنكم استعمال (Ctrl +F) من أجل البحث في القالب.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

4- الأن نقوم باستبدال كلمة 'true' بكلمة 'false'

5- ثم قم بحفظ القالب.

و هكذا نكون قد قمنا بإخفاء أو حذف الأداة من قوالب بلوجر بطريقة صحيحة.

نحن في انتظار تعليقاتكم و إن واجهتكم أي مشكلة فنحن رهن الإشارة دائما.

تثبيت أداة في مكان خاص على بلوجر

2017-04-01T13:52:00.000-07:00

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

<b:widjet id

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

<b:widget id='HTML3' locked='false' title='هنا ستجد إسم الأداة' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

من أجل إظهار الأداة على جميع الصفحات باستثناء الصفحة الرئيسية،

<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

من أجل إظهار هذه الأداة فقط على صفحة معينة من المدونة نستعمل الكود:

<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "أضف هنا رابط من روابط مدونتك_http://..."'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

يجب إضافة الأكواد باللون الأحمر فقط.

تعليقات بلوجر بشكل احترافي رائع

2017-03-27T07:26:00.000-07:00

نقدم لكم اليوم إن شاء الله درس حول تغيير شكل تعليقات بلوجر، بحيث سوف نجعله بشكل رائع و جميل كما توضح الصورة أسفله.

و بطبيعة الحال، لِمن لديه دراية جيدة بخصوص الـــ CSS و الــHTML، يمكنه تغيير نوع الخط و ألوان الخطوط كما يشاء.

المرحلة الأولى : ضبط إعدادت التعليقات المترابطة من لوحة التحكم.

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

في السماح بخلاصات المدونة إجعلها كامل (كما في الصورة أسفله)، بعدها قم بحفظ.

بعد حفظ الإعدادت توجه إلى المشاركات و التعليقات و المشاركة .

الآن موقع التعليقات إجعلها مضمن. (كما في الصورة أسفله)

أولا و قبل كل شيء، قم بحفظ نسخة احتياطية من قالب مدونتك.

المرحلة الثانية: إضافة الكود إلى القالب
في لوحة التحكم الخاصة بمدونتك توجه إلى قالب بعدها تحرير الـــــ HTML ثم أنقر على متابعة.
ثم إعمل علامة على توسيع قوالب عناصر واجهة المستخدم.

الآن قم بالبحث عن رمز الكــــــــــــود:

<b:include data='post' name='comments'/>

ثم نقوم باستبداله بهذا الكــــــــــــود:

<b:if cond='data:post.showThreadedComments'><b:include data='post'
name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if>

ملاحظة : إذا وجدت كودين او اكتر استبدلهم جميعا

المرحلة الثالثة: إضافة خصائص الـــCSS:

الآن قم بالبحث مرة أخرى عن الكــــــــــــود:

]]></b:skin>

و قم بإضافة الكــــــــــــود قبله:

.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;}.comments .comments-content {font-size: 14px;margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:right;line-height: 1.4em;}.comments .continue a, .comments .comment .comment-actions a {display:inline;font-family:Arial, Helvetica, sans-serif;font-size:13px;padding: 2px 5px;text-decoration: none;text-shadow:0 1px
1px rgba(0,0,0,.3);color:#FFF;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px
rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);-webkit-border-radius: 3px;-moz-border-radius:
3px;border-radius: 3px;margin-right: 10px;border: 1px solid #3079ED;background: #0066FF;background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));background: -moz-linear-gradient(top, #0099FF, #009999);filter: progid:DXImageTransform.Microsoft.gradient(startCo
lorstr='#0099FF', endColorstr='#009999');}.comments .continue a:hover, .comments .comment .comment-actions a:hover {text-decoration: none;background:#0099FF;background: -webkit-gradient(linear, left top, left
bottom, from(#009999), to(#0099FF));background: -moz-linear-gradient(top, #009999, #0099FF);filter:
progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#009999', endColorstr='#0099FF');}.comments .continue a:active, .comments .comment .comment-actions a:active {position: relative;top:1px;background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));background: -moz-linear-gradient(top, #0066FF, #0099CC);filter: progid:DXImageTransform.Microsoft.gradient(startCo
lorstr='#0066FF', endColorstr='#0099CC');}.comments .comments-content .comment-thread ol {list-style-type:
none;padding: 0;text-align: none;}.comments .comments-content .inline-thread {padding: 0.5em 1em 0
1em;}.comments .comments-content .comment-thread {margin: 8px 0px 0px 0px;}.comments .comments-content .comment-thread:empty {display: none;}.comments .comments-content .comment-replies {margin-top: 1em;margin-left: 40px; font-size:12px;}.comments .comments-content .comment {padding-bottom:8px;margin-bottom: 0px}.comments .comments-content .comment:first-child {padding-top:16px;}.comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;}.comments .comments-content .comment-body {position:relative;}.comments .comments-content
.user {font-style:normal;font-weight:bold;}.comments .comments-content .user a {color: #444;}.comments
.comments-content .user a:hover {text-decoration: none;color: #555;}.comments .comments-content
.icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 6px -4px;}.comments .comments-content .datetime {margin-left:6px;color: #999;font-style: italic;font-size: 12px;float: left;}.comments
.comments-content .comment-content {font-family: Arial, sans-serif;font-size: 15px;line-height:
19px;}.comments .comments-content .comment-content {font-family: Arial, sans-serif;font-size: 15px;line-height: 19px;text-align:none;margin: 15px 0 15px;}.comments .comments-content .owner-actions
{position:absolute;right:0;top:0;}.comments .comments-replybox {border: none;height: 250px;width:
100%;}.comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;}.comments .comment-replybox-thread {margin-top: 5px;}.comments .comments-content .loadmore a {display: block;padding: 10px
16px;text-align: center;}.comments .thread-toggle {cursor: pointer;display: inline-block;}.comments
.comments-content .loadmore {cursor: pointer;max-height: 3em;margin-top: 3em;}.comments .comments-content .loadmore.loaded {max-height: 0px;opacity: 0;overflow: hidden;}.comments .thread-chrome.thread-collapsed {display: none;}.comments .thread-toggle {display: inline-block;}.comments .thread-toggle .thread-arrow {display: inline-block;height: 6px;width: 7px;overflow: visible;margin: 0.3em;padding-right:
4px;}.comments .thread-expanded .thread-arrow {background:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc
AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow {background:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}.comments .avatar-image-container {float:
right;overflow: hidden;}.comments .avatar-image-container img {width: 36px;}.comments .comment-block
{margin-right: 48px;position: relative;padding: 20px 15px 20px 15px;background: #F7F7F7;border: 1px solid
#E4E4E4;overflow: hidden;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-image: initial;}

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

نرجو لكم كل التوفيق.

قالب ExpressNews معرب

2016-09-18T12:27:00.000-07:00

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

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

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

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

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

اضغط هنا.

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

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

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

2016-09-18T11:15:00.000-07:00

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

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

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

الخطوة الثانية: إنشاء صفحة "اتصل بنا".
الآن نصغط على [ الصفحات ]، تم صفحة جديدة (كما توضح الصورة أسفله).
و يمكنكم تسميتها "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، يمكنه التعديل عليها كما يشاء.
و إذا واجهتم أية مشاكل، فلا تترددوا في طرحها ضمن تعليقاتكم.

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

2016-09-18T11:00:00.000-07:00

تريدون إنشاء نموذج بلوجر انطلاقا من صفحة بيضاء.
لديكم معرفة مسبقة باللغتين 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>