الطريقة دي اتشرحت قبل كدة بالعربي في مدونات اخري ولكن ماكنش ينفع تطبقها علي المواضيع القديمة و لازم تعملها تعديل من جديد و دة شيئ مرهق جدا طبعا.
الطريقة اللي هاشرحها باذن الله من اهم مميزاتها انها حتتعمل علي جميع المواضيع سواء القديمة او الحديثة و بدون اي تدخل منك في كل موضوع .
ولكنها لها سلبية وحيدة و هي انك مش هتقدر تتحكم في الجزء الظاهر و الجزء المخفي من مواضيع.
الطريقة منقسمة لجزئين...الجزء الاول و هي طريقة اخفاء جزء من الموضوع ولو الزائر ضغط علي "اقرأ المزيد" الموضوع حيتمدد في نفس الصفحة...
الطريقة الثانية و هي ان باقي الموضوع حيتفتح في صفحة لوحده و سوف يتم شرح الطريقتين باذن الله.
الطريقة:
(الجزء الاول)
يجب ان تأخذ نسخة احتياطية من قابلك قبل البدء في العمل.
اذهب الي Layout>Edit HTML في مدونتك و تأكد من قد ضغط علي "expand widget templates"
ثم ابحث عن </head> في القالب ( CTRL+F للبحث في المتصفح)...
واضف قبلها مباشرة الكود الاتي
< language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
< language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
< type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: 'إقرأ المزيد', // default is 'read more...'
});
});
</>
ثم ابحث عن <data
ost.body/>ثم حدد الكود الاتي
<div class='post-body entry-content'>
<data
ost.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
و استبدله بهذا الكود ...
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data
ost.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data
ost.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
الان Preview للتأكد من خطواتك سليمة و سوف تري ان مواضيعك قد لخصت و اضيفت كلمة "إقرأ المزيد" بجانب كل موضوع و للحفظ Save.
و بكدة يكون الجزء الاول انتهي ولو ضغط علي " إقرا المزيد" الموضوع هيتمدد في نفس الصفحة...
لكن لو انت عايز يتفتح لوحده في صفحة اذن اقرأ الجزء الثاني.
(الجزء الثاني)
1- ابحث عن هذه الكلمة expander.js واستبدلها بهذه extractor.js
2- ابحث عن الكود الذي اضفناه عند <data
ost.body/> و اضف اليه الجزء الملون بالاحمر<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data
ost.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data
ost.url">إقرا المزيد</a><b:else/>
<div class='post-body entry-content'>
<data
ost.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
تأكد من اضافة هذا السطر في مكانه الصحيح فوق <b:else/> مباشرة والا قد تحدث اخطاء.
الان Preview ولو حصل اخطاء مش هينفع تشوف اللبوج و يظهرلك كلام بالاحمر.... اما لو صح في حتشوف البلوج و تحت المواضيع كلمة "اقرا المزيد".
الان Save.