إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور

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

- أولا : قبل أي تغير نقوم بحفض القالب تفاديا للأخطاء
 - ثــــــــانيا : نذهب إلى  تصميم / تحرير html و بctrl-f نبحث عن الكود التالي

</head>

قم بلصق الكود التالي قبله مباشرة 
1 - لوضع الصورة يسار النص نضيف الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128;  /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

2 - لوضع الصورة يمين النص نضيف الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250;      /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128;  /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

3 - لوضع الصورة وسط النص نضيف الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */

summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/

img_thumb_height = 128; /* عرض الصورة في الملخص*/

img_thumb_width = 128; /*طول الصورة في الملخص */

</script>

<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

والآن قم بالبحث عن الكود التالي : 

<data:post.body/>

ثم قم بإستبدالة بهذا الكود : 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://kalam-blogger.blogspot.com/2012/04/blog-post.html' style='display:none;'>Résumé</a><a href='http://kalam-blogger.blogspot.com/' style='display:none;'>kalam-blogger</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الأخضر في الكود السابق بكلمة أخرى حسب رغبتك 
و إن أردت وضع صورة  وذلك بإستبدال عبارة إقرأ المزيد..  بالكود التالي : 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSKY5DNQGf1T6I92HHUlLprqtN0yrfL6yT3_Yq-etEH4vun_1asqPspyfH2d_6g0RG7jCa_HuPNjbmt6tKJN-WbuEWNg26I8f91stl_IHxxmi0Gkjcm9Sx66ivTGU4w0NGJaM9HG3GpQ/s1600/24-04-2012+11-54+DALR.png" title="إقرأ المزيد" alt="إقرأ المزيد"/>

و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون  برابط الصورة المراد تبديلها إليك بعض الإقتراحات .

و أخيرا احفظ القالب و مبروك عليك! 

6:48 ص