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

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

1. ثم  > عناصر تصميم الصفحه > ثم تحرير HTML.
2. قم بحفظ نسخه احتياطيه من قالب مدونتك.
3. ضع علامه على خانة توسيع القالب.
4. ابحث عن </head> وضع قبله مباشرة الكود التالي.

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

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

<data:post.body/>

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

<!-- Auto read more Start -->
<!-- http://www.tqarob.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

يمكنك تبديل كلمة "

Read more

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

Read more

.. بالكود التالي :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwR7e0otHjy768ChMWCLZFxEgHgGVtRUnV2VwQbZfLRB4HljCyLnJk5hE320QIy3Z5skQ1ju_vPn61BuZPXGSLr4wHuw2soTnfxme3_RSK3xR5bsFEgc83FrJdiGcWRftl-QfAvHxig2zK/s1600/read+more.gif" title="إقرأ المزيد" alt="إقرأ المزيد"/>

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