طريقة إظهار أكواد HTML أو java داخل تدويناتك في البلوجر

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

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

الخطوة الثانية : اذهب إلى قالبك من خلال تخطيط ثم تحرير HTML ثم قم بالتعليم على خانة توسيع قالب المدونة ، بعد التوسيع اضغط على CTRL+F من أجل البحث عن الكود التالي :

]]></b:skin>

الخطوة الثالثة : بعد الوصول إلى الكود السابق قم بإضافة هذا الكود فوقه ، مهم قم بإضافته فوق الكود السابق .

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

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

<pre></pre>

ولكي تظهر الكتابة يجب أن نضيفها داخل <pre> و </pre> وأي كتابة خارج هاذين الكودين ستظهر بشكلها الطبيعي .
وهذه صورة مثال عما أتحدث عليه :

وهذه النتيجة :

الخطوة الخامسة والأخيرة : ما قلته في الخطوة الرابعة ينطبق على الكتابة بالحروف فقط ، أما الكتابة بأكواد html أو java فإليكم الطريقة .
سنحتاج بشكل مستمر إلى أداة postable وهي أداة لا غنى عنها في الوقت الحالي ، وهي تقوم بتحويل الأكواد إلى ما يسمى بالأكواد الصديقة للـ html .
ولكي تستوعب ما أتحدث عنه قم بالتالي : قم بنسخ أي كود يقع تحت عينيك حاليا ، توجه إلى أداة postable قم بلصق الكود داخل المستطيل واضغط على MAKE IT FREINDLY ، ستجد أن الكود قد تحول إلى كتابة غير مفهومة وهذا ما نريد بالضبط أن نصل إليه .

تلخيص لخطوات العمل بكاملها :
بعد أن تصيف الكود إلى قالبك في الخطوات الأولى والثانية والثالثة ، قم بحفظ القالب .
الآن إذا أردت أن تكتب موضوع في مدونتك والموضوع يحتوي بداخله على أكواد فيجب أن تقوم بالتالي :
حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداة postable .
الكود الذي حصلت عليه ضعه داخل الكودين التاليين <pre> و </pre> ، من خلال وضع تحرير HTML وليس وضع تأليف .
وهكذا سيظهر الكود مأطر وبشكل سليم داخل التدوينة ، والصورتين في الخطوة الرابعة توضحان الطريقة والنتيجة .

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

إعادة توجيه مدونة البلوجر إلى موقع آخر تختاره

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

القسم الأول :
الخطوة الأولى وكما اقتضت العادة قم بأخذ نسخة احتياطية من مدونتك عن طريق : التخطيط ثم تحرير HTML ثم تنزيل قالب كامل .
الخطوة الثانية وهي التعديل في قالب المدونة وسنقوم فيها أولا بالبحث عن الكود التالي عن طريق الضغط على CTRL+F وإدخال الكود :

<head>

الخطوة الثالثة وهي أن تضيف هذا الكود مباشرة أسفل الكود السابق :

<meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>

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

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

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

<b:section class='main' id='main' showaddelement='no'>

الخطوة الثانية وهي إضافة الكود التالي مباشرة أسفل الكود السابق الذي بحثنا عليه :

<div style='position: absolute; top: 0; left: 0; margin: 30px;
border: solid 2px #333; color: #000; background-color: yellow;
padding: 25px; width: 85%; z-index: 5;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;'>
<p><strong>My blog has moved!</strong></p>
<p>من المفترض أن توجه إلى الموقع الجديد .
إذا لم يحدث ذلك فأرجو أن تضغط على الرابط التالي :<br/> <a style="color:red;"
href='http://www.website.com/blog/'>
<strong>http://www.website.com/blog/</strong></a>
<br/> ولا تنسى أن تحدث مفضلاتك .</p></div>

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

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

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

إضافة أيقونة "Save as PDF" لحفظ المواضيع على شكل ملف PDF

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

<data:post.body/>

الخطوة الثالثة هي إضافة هذا الكود أسفل الكود السابق

<script type="text/javascript">
</script>
<script src="http://web2pdf.freepdfconvert.com/pdfbutton.js"
type="text/javascript">
</script>

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

انتهى الموضوع بحمد الله

تحسين نتائج البحث لمدونتك في محركات كوكل

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


سيقول البعض أنها ليست بمشكلة لكن لا تنسى الأمر الأول ذكرته و الذي يركز على أن يكون العنوان مختصر وقصير ، فتخيل معي لو أن عنوان مدونتك هو "مدونة المصور الفوتغرافي عبد القادر جليل" بجانب عنوان تدوينة أخرى اسمها " آخر إصدار من برنامج الحماية من ملفات التجسس والإختراق Qunup Spyware v15.0 " فثق بي أن لا أحد سيدخل ولو كانت هي النتيجة الوحيد التي ستظهر .
حسنا لحد الآن ذكرنا المشكلة وشرحناها ، بقي الآن أن نعطي حلا لها ، الحل بسيط للغاية وبثلاث خطوات انشاء الله سنتمكن من التغلب على هذا المشكل ، لكن تذكر قبل أن تبدأ في قراءة الشرح أن تأخذ نسخة احتياطية من قالبك لتجنب أي شيء قد يحدث .
أول خطوة : توجه إلى قالبك من التخطيط ثم تحرير HTML .
ثاني خطوة : سنقوم بالبحث عن كود ، وللقيام بذلك اضغط على CTRL+F وأدخل في المربع الذي سيظهر الكود التالي :

<title><data:blog.pagetitle/></title>

ثالث خطوة : البحث قام بالتظليل على الكود مما يعني أنه قد وجده ، دعه مظلل وقم بلصق هذا الكود في مكانه

<b:if cond= 'data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

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

ملاحظة مهمة

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

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

طريقة تعريب قوالب البلوجر

الكثير من مستخدمي مدونات البلوجر يعانون من مشكل القوالب الغير المعربة والقوالب المعربة التي توفرها خدمة البلوجر شكلها عادي جدا وفي بعض الأحيان لا يلبي رغباتنا من حيث التدوين ، فإما أن يكون القالب معكوس بحيث تقرأ الكتابة من اليسار إلى اليمين أو أن يكون عنوان التدوينة كلماته مقلوبة إذا ماكانت خليطا بين اللآتنية والعربية ، أو حتى أن تظهر التعليقات من جهة اليسار . والسبب في هذا المشكل هو كود يوجد داخل صفحة HTML يجب تعديله ليناسب التدوين العربي .
الشرح الذي سيتناول طريقة التعديل بسيط جدا وخطواته سهلة للغاية فقط اتبعها بعناية .
أول خطوة هي أن تقوم بالتوجه إلى صفحة HTML : من التخطيط ثم تحرير HTML .
ثاني خطوة هي أن تقوم بتوسيع القالب من خلال التعليم على : توسيع قوالب عناصر واجهة المستخدم .
ثالث خطوة وهي البحث : اضغط علىCTRL + F وستظهر واجهة تختلف على حسب المتصفح الذي تستعمله لكنها كلها تحتوي على مستطيل البحث .
رابع خطوة : داخل ذلك المستطيل اكتب الكود التالي

<div id='

خامس خطوة : ستجد أن البحث ذهب إلى كود باسم

<div id='outer-wrapper'>

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

<div dir='rtl' id='outer-wrapper'>

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

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

طريقة تغيير أيقونة Favicon في مدونات البلوجر

هناك القليل على ما أعتقد من لاحظ أن شركة كوكل قد غيرت مؤخرا الـ Favicon خاصتها ، والـ Favicon هي الأيقونة التي تظهر بجانب رابط الموقع في أعلى المتصفح مثل ما في الصورة جانبه ، وهي تمثل غالبا شعار الموقع أو تخصصه ، فمثلا إذا كان الموقع خاص بالألعاب فستجد تصميم الـ favicon يميل إلى مجال الألعاب وهكذا ...

ما يهمنا في ما ذكرته سابقا هو كلمة Favicon بحيث سأشرح طريقة تغييرها في مدونات البلوجر عن طريق صفحة HTML الموجودة في خصائص التحكم في قالب المدونة ، وأريد أن أشير إلى أن هذه الفكرة ليست لي تماما فهي مأخوذة عن موقع favicon.cc الذي يمكن أن أقول أنه كان بداية الفكرة والباقي كان علي ، وكذلك أريد أن أشير إلى أن هذه الفكرة لن تنجح مع أصحاب مدونات الووردبريس لأن الفكرة قائمة على HTML وللأسف فإن موقع الووردبريس لا يوفر خدمة التعديل على HTML وهذا ما جعلني أفضل عليه موقع البلوجر
سأبدأ في الشرح وكخطوة أولية كالعادة خذ نسخة من قالبك كإجراء احتياطي .
الخطوة الثانية توجه إلى : التخطيط ثم إلى تحرير HTML .
الخطوة الثالثة اضغط على : CTRL + F
الخطوة الرابعة سيظهر مربع بحث أدخل فيه الكود التالي :

</head>

ثم اضغط على زر البحث سينتقل بك مباشرة إلى الكود الذي كتبناه قبل قليل ، ومباشرة بعده قم بكتابة هذا الكود

<link href='url' rel='shortcut icon'/>
<link href='url' rel='icon'/>

وبهذه الخطوة نكون قد انتهينا

ملاحظات مهمة

'url' = رابط الأيقونة التي تريدها أن تظهر
تستطيع أن تصمم الأيقونة بأي برنامج تصميم ويفضل برنامج الفوتوشب
لمن يواجه مشكلة في التصميم فهذا الموقع سيفيدك كثير favicon.cc
لايجب أن يتجاوز حجم التصميم 32*32 على الأكثر و 16*16 على الأقل

إضافة تقييم المواضيع إلى البلوجر

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

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

طريقة إضافة "اقرأ المزيد " لمدونات البلوجر Blogger

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

أولا ستدخل إلى مدونتك كما العادة ثم ستتجه إلى :

تخطيط >> ثم إلى >> تحرير HTML ثم إلى >> تنزيل قالب كامل

تماما كما في الصورة التالية :


بعد أن تقوم بأخذ نسخة احتياطية من قالب مدونتك ، يجب أن تبقى في نفس الصفحة لأنها تحتوي على القالب الذي نريد التعديل عليه .
قم بالتعليم على "توسيع قوالب عناصر واجهة المستخدم" كما في الصورة ، والهدف من هذه العملية هو أن القالب يكون على شكله المختصر والغير الكامل ، وبعد التعليم على تلك الخانة سيظهر القالب بشكله الكامل والحقيقي .

والآن أهم خطوة في في هذه المرحلة وهي البحث في القالب عن الأسطر التالية :

<div class='post-header-line-1'/>
<div class='post-header-line'>

ولعمل ذلك اضغط على CTRL+F وأدخل الأكواد السابقة أو أحدهما إلى مستطيل البحث .

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

لنعود إلى موضوعنا ، بعد أن تجد الأكواد السالفة الذكر، ضع أسفلها هذا الكود وهو الجزء الأول من الإضافة المراد اضافته إلى القالب :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

بعد أن تلصق الكود في موضعه الصحيح حيث سبق وأوضحت يجب أن تكون النتيجة كما في هذه الصورة :

لمن يستخدمون القالب من النوع الثاني ، فالنتيجة يجب أن تكون هكذا :

وبهذا نكون قد قطعنا نصف الطريق .

لاحظ معي الصورتين السابقتين وقلي ماذا ترى ، أكيد أنك ترى هذا الكود :

<data:post.body/>

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

الآن ما نريده هو إضافة الجزء الثاني من الإضافة ، هنا يأتي دور الكود السابق الموجود في الصورتين ، بحيث أننا سنضيف الجزء الثاني من الإضافة أسفل ذلك الكود .

وهذا هو الجزء الثاني من الإضافة قم بنسخه كما سبق وذكرت في الملاحظة وألصقه أسفل الكود السابق :

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

ويجب أن تكون النتيجة كما في الصورة التالية :

إلى هنا تنتهي الخطوة الأولى من الموضوع ، ولكي تتأكد من أن الخطوات السابقة سليمة قم بمقارنتها مع الصورة التالية :

الخطوة الثانية : طريقة إضافة الكود إلى إعدادات المدونة

هنا تأتي المرحلة السهلة في الموضوع والتي لا تحتاج جهدا كبيرا في العمل .

اتجه إلى " إعدادات " => " التنسيق " => " قالب الرسالة "

ثم أضف الكود التالي :

<span class="fullpost">

</span>

يجب أن تكون النتيجة كما في الصورة التالية :

لا تنسى أن تحفظ الإعدادات بعد الإنتهاء من اضافة الكود

الخطوة الثالثة : اختبار لكل ما سبق عمله .

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

كما يعلم الجميع ، المكان الذي نستطيع فيه التحكم بالجزء المراد ظهوره في الموضوع عند صفحة البداية هو مكان كتابة الموضوع لذلك عندما تبدأ في التدوين ستقوم بعمل التالي :



ستعمل تماما كما في الصورة ، وستكون النتيجة كما يلي :

وهكذا يكون قد انتهى الموضوع .

ملاحظات هامة :

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

هناك من يفضل أن يضيف عبارة أخرى غير "اقرأ المزيد ..." وهذا الأمر سهل للغاية ، فقط قم بتغيير العبارة "اقرأ المزيد ..." بأي عبارة تفضلها .

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

تذكر أن التعليقات مفتوحة لأي كلمة شكر أو استفسار أو حتى انتقاد .