أضف إقرأ المزيد إلى مدونتك بلوجر لتلخيص التدوينات شرح كامل ومفصل

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

أولا سوف نتطرق إلى مميزات الإضافة :

- يمكنها تلخيص التدوينات تلقائيا.

- أخد شكل واحد لطريقة عرض المواضيع.

- إختيار صورة للموضوع وتوضع .

الأن سوف نشرح طريقة الإضافة :

1-قم بالتوجه إلى لوحة التحكم في مدونتك بلوجر.

2- الأن قم بالنقر على تصميم أو قالب ثم تحرير Html.

3 - قم بوضع علامة على توسيع قوالب عناصر واجهة المستخدم.

4- بعدها قم بالبحث عن : </head>

بعدها قم بوضع الكود قبله :

<!-- Auto read more script Start www.homeblooger.blogspot.com –>
<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:right; padding:0px 0px 0px 8px;"><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>
<!-- www.homeblooger.blogspot.com  Auto read more script End –>

5-قم بالبحث مرة أخرى عن <data:post.body/>

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

<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'>إقرأ المزيد....</a>
</b:if>
</b:if>

الأن سوف نشرح لكم طريقة التحكم في الإضافة : 

summary_noimg = 430; طول الملخص الذي بدون صورة

summary_img = 340; طول الملخص مع الصورة

img_thumb_height = 200; عرض الصورة في الصفحة الرئيسية

img_thumb_width = 200;طول الصورة في الصفحة الرئيسية

<a class='more' expr:href='data:post.url'>إقرأ المزيد....</a> بإمكانك تغيير إقرأ المزيد في الكود بما تريد أو بإمكانك إدراج صورة إستبدل العبارة بالأتي مع تغيير رابط الصورة الذي باللون الأزرق

<img src="http://4.bp.blogspot.com/-YnxshBASiX8/Tf5InnMYPxI/AAAAAAAACS4/sT7fbvlMnIE/s1600/redmore2.png" title="إقرأ المزيد" alt="إقرأ المزيد"/>

هذا الرابط لصورة إقرأ المزيد التي على مدونة أبو إياد

هذه مجموعة من الصور لإقرأ المزيد بحثت عنها مرفوعة على ميديافاير لتحميلها من هنا

إنتهى الدرس وإلى درس أخر بإذن الله وأي مشكلة أخوكم في الخدمة