طريقة عمل مدونة ذات ملخص وقابلة للتوسعة read more

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

صفحة مدونتك الرئيسية عادة ما تعرض كل المحتوى لكل رسائلك. إذا كانت مشاركاتك وعادة ما تكون أكثر من فقرتين، عندئذ سيجد زائرك صعوبة في العثور بسرعة على الموضع الذي يهتم به لأنه يحتاج الكثير من النزول لأسفل. ولهذا نستخدم الملخص المنسدل وخاصية المواضيع القابلة للتوسعة في المدونات القديمة. وهذه الخاصية تؤدي الغرض ذاته في المدونات الجديدة وأكثر! بهذا، صفحتك الرئيسية سوف تعرض فقط الملخصات وعند الضغط على "أقرأ المزيد" سوف يظهر كامل الموضوع في نفس الصفحة الرئيسية مما يوفر الأنتقال لصفحات كثيرة. بالإضافة إلى رابط "الملخص فقط" يمكن للقارىء تصغيير الموضوع مرة اخرى. أضف إلى ذلك ميزة أن رابط "أقرأ المزيد" تظهر فقط للرسائل المقسمة! هذه خاصية مذهلة ولكن عليك توخي الحذر عند التعديل على القالب html. إذا لم تكن على دراية بـ html يفضل طلب الأتصال بصديق^_^. وبما أنك هنا فلا تقلق!
في هذه الخاصية، يمكنك اختيار عرض أي مقاطع من النص في بداية كل رسالة، كملخص لكل المقالة. وللقراء الذين يريدون تكملة الموضوع يمكنهم الضغط على رابط لرؤية النص الكامل. وهذا ملائم إذا كان لديك الكثير من المقالات الطويلة في كل صفحة واحدة. علما بأنه يجب عليك تمكين صفحات الرسائل للإستفادة من هذه الميزة. –هذا هو الأساسي default ولكن لا مانع من التأكد...
ولتمكين صفحات الرسائل إذهب إلى الإعدادت >> الأرشفة >> هل تريد تمكين صفحات الرسائل؟ >> نعم >> حفظ الأعدادات. أنظر الصورة...

ملحوظة: لمستخدم FTP/SFTP ربما يحتاج أدلة لمشاركاتهم مثل 2004, 2004/01, 2004/02، إلخ.
الخطوات الواجب اتباعها:
هناك ثلاث مقومات تدخل في هذه الميزة: conditional CSS، رابط "اقرأ المزيد" ورابط "الملخص فقط" لكل مشاركة، والتعديل في الرسائل التي تستخدم هذه الميزة. ولكن يجب أن تسبقهم خطوتين. لذلك دعونا نذهب للتطبيق خطوة خطوة.
1-توسيع قوالب عناصر واجهة المستخدم:
من "تخصيص" أو من "لوحة التحكم الرئيسية" إذهب إلى "التخطيط" ثم "تحرير html" ومنها أضغط على " توسيع قوالب عناصر واجهة المستخدم" لتظهر لك كل الاكواد. انظر الصورة...

2-تنزيل قالب كامل:
خطوة هامة جدا عند عمل أي إضافة أو تعديل على القالب، وهي نسخ كل الاكواد Ctrl+A ثم Ctrl+C وحفظها بملف نصي على الحاسوب الخاص بك، كما يمكنك الضغط على رابط " تنزيل قالب كامل" لحفظ القالب كاملا بصيغة XML، لكي تتمكن من العودة إليه ولصق ما نسخته أو "إيداع" ما رفعته، في حالة حدوث خطأ لا قدر الله. انظر الصورة السابقة...
3-Conditional CSS:
نبدأ العمل إذا، أبحث عن كود..............
</head>

في القالب، ويمكن البحث باستخدام Ctrl+F، واضف قبله هذا الكود كاملا من هذه الصفحة. قبله أي تؤشر بالفارة في بداية سطر الكود وتضغط enter لعمل سطر فارغ قبله تنسخ به الاكواد...

تحديث: أو من هنا مباشرة لربما تحذف الصفحة التي بها الكود:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

4-رابط "اقرأ المزيد" ورابط "الملخص فقط":
أبحث عن هذا الكود........................
id='post'

وأنسخ وألصق التغيرات الملونة بالأحمر في هذه الصفحة (كن حريصا جدا على تجنب الأخطاء، وللإشارة ربما لا تظهر هذه الكلمة "uncustomized-post-template" في القالب ولكن لا بأس.
رابط "اقرأ المزيد" سوف يظهر فقط في الصفحة الرئيسية وصفحات الأرشيف، وسوف يجعل باقي الرسالة تنسدل للقارىء بالصفحة الرئيسية والتي تحتوي على النص الكامل لمقالتك، وبالأسفل رابط "الملخص فقط".

تحديث: يمكنك اتباع هذه الخطوات مباشرة بدلا من الصفحة السابقة
أ- ابحث عن هذا الكود...............
<div class='post uncustomized-post-template'>

وأستبدله بهذا الكود
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>


ب- ابحث عن هذا الكود................
<p><data:post.body/></p>

وأستبدله بهذا الكود
<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

للإشارة، يمكنك تغيير نص "...Read more" ونص "Summary only…" إلى ما تريد، طبعا.
5-التعديل في الرسائل:
في الجزء الأخير كل ما نحتاج هو إضافة كود صغير في الرسالة الفعلية. كل رسالة تريد أن تعمل بها هذه الميزة يجب استخدام هذا الكود بالأسفل:
Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

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


...الآن عند كتابة رسالة جديدة سوف يظهر لك أين تكتب الملخص وأين تكتب باقي الرسالة،
ومن المهم التأكد من أن /span في نهاية الرسالة. لضمان ذلك، استخدم "تحرير Html" بدلا من "تأليف" حين كتابة الرسالة، وبعد الكتابة يمكن الذهاب إلى "تأليف" وتغيير الخطوط والألوان وخلافه.
وللإشارة، يمكن أيضا تقسيم الرسائل القديمة إلى ملخص وكامل الرسالة، وذلك بتحرير الرسائل وإضافة الكود.
وللعلم، رابط "اقرأ المزيد" ورابط "الملخص فقط" لن يظهر إلا في الرسالة المقسمة بهذه الطريقة. وهذه ميزة ربما لن تجدها في الأكواد الأخرى.
ملاحظة، ربما تريد كتابة موضوع قصير بدون رابط "اقرأ المزيد" يمكنك عمل هذا ببساطة بحذف الكود عند تأليف الرسالة.
مزايا هذه الطريقة: ملخصات للتخصيص، بدلا من العنوان فقط. ويمكن تطبيقها على بعض الرسائل دون غيرها (على سبيل المثال: قد تريد هذا للرسائل الطويلة فقط)، بالأضافة إلى رابط "الملخص فقط"، وانسدال باقي الموضوع في نفس الصفحة الرئيسية.
العيوب: يتطلب تغييرات في الرسائل نفسها، وليس القالب فقط، ومع ذلك، فإن رابط "اقرأ المزيد" يمكن وضعه في قالب الرسالة ليظهر دائما. وكذلك مشكلة واجهتني بسبب اللغة العربية في تنسيق النص ونهاية الملخص، ومع ذلك يمكن التغلب عليها بعد معرفة html جيدا.
المراجع:
Blogger Help
Peter
Ramani
تحديث:هذا المصدر تقريبا تم حذف المدونة"hackosphere.blogspot" لهذا تم تحديث الموضوع
بعض الحقوق محفوظة
يمكن نسخ ونقل الموضوع ونشره وتوزيعه لغير الأغراض التجارية^_^ بشرط ادراج رابط مباشر للمصدر وللمؤلف.
تم نشر الموضوع لأول مرة بتاريخ 30/7/2009

14 التعليقات:

غير معرف يقول...

بجد جميل جدا
والحمدلله انك عرفت
بس والله فكرة كويسة انا مكنتش عارف بتتعمل ازاي
منور عالم التدوين كله والله
ومستنين الافكار والكتابات

alka3bi-Rs يقول...

مشكوووووووور اخوي على هذا الموضوع الرائع

ننتظر المميز :)

يعطيك العافية

سرحان يقول...

أشكركم على تشريفكم لمدونتي المتواضعه
واتمنى لكم الفائدة المرجوة
تحياتي

mohaomar يقول...

والله انتة راجل محترم
ربنا يخليلك المدونة وتعمل فيها
ما يرضى الله

tarik يقول...

شكرا جزيلا لك

Mr.Professional يقول...

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

سرحان يقول...

أهلا بكم، زيارتكم تشرفني، وتفاعلكم يسعدني...
@ Mr.Professional
أتمنى منك توضيح ما هي المشكلة بالضبط
وإن شاء الله يمكن التغلب عليها
فأعتقد ان الخطوات واضحة أو هكذا أتمنى..

admin يقول...

جزاك الله خيرا أخي الكريم على هاته المساعدة التي تقدمها في هاته المدونة الطيبة..

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

دمت بود

سرحان يقول...

أشكرك أخي خالد على زيارتك وتشريفك لمدونتي المتواضعة
متنميا لك قضاء وقت ممتع ومفيد هنا
تحياتي

عبدالرحمن أسعد يقول...

السلام عليكم و رحمة الله و بركاته
أخي الحبييب عملت الطريقة ألي فاتت ولاكن بيطلع علي طول أيرور ، فكنت عاوز حل ربنا يجزيك خير
و ده أميلي للتواصل و الأهمية
Aobuda_Almasry@hotmail.com

سرحان يقول...

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

عبير أكوام يقول...

اليدسلام عليك أخي سرحان ^__^
أسعدني قراءة هذا الشرح كنت أتساءل عن الكيفية..
باركك المولى

سرحان يقول...

اهلا ومرحبا بالأخت العزيزة عبير
أسعدني وجودك ومرورك العطر هنا
للأهمية: هناك طريقة تختلف عن هذه الطريقة وهي تفتح الموضوع كاملا ويفضلها الكثير.. ولكن طريقتي هذه هي المفضلة لدي^_^
يوجد طريقة بسيطة وبدون أي إضافات لتحصلي على رابط اقرأ المزيد فهي متوفرة بمدونات بلوجر الآن. فقط يجب عليك الذهاب إلى الأعدادات ثم أساسي ثم اعدادات عمومية بنفس الصفحة أسفل ثم تحديد محرر المشاركات ثم تختارين تحديث المحرر ومن ثم حفظ الإعدادات...
ومن ثم سيظهر لك صورة أيقونة جديدة تضغطين عليها فقط عند السطر الذي تريدين فيه رابط اقرأ المزيد...
ولكنه سيظهر جملة بهذا الشكل
مزيد من المعلومات>>>
يمكنك تغيرها لما تريدين من خلال
التخطيط ثم تهيئة رسائل المدونة الإلكترونية ثم نص رابط صفحة التدوينات: وتغيرين الجملة لما تريدين...
تجدر الإشارة إلى انني لم اجربها كليا ولكني لاحظت تغيير في تحرير html وكذلك بعضهم يقول انها اضافة حديثة تحت التطوير وربما بها بعض المشاكل خاصة مع اللغة العربية..
كما تجدر الإشارة هنا إلى انه يمكن وضع هذا الكود إن لم ترغبي في تحديث المحرر
<!-- more -->
في المكان الذي ينتهي فيه الملخص....
هنا مساعدة جوجل يمكن الاعتماد عليه
إنشاء ملخصات للمواضيع

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

Unknown يقول...

شكرا على المجهود و التوضيحات

http://zaman-jamil.blogspot.com/

:)) ;)) :D ;) :p :(( :) :( :-o :-/ :| :-t b-( :-L x( =))

إرسال تعليق