السَلٱمٌ عـَلـْيگمّ-ۈرحـْمّـٌة ٱللـّہ ﯙبُرگـّاتہ
في هذا الشرح الجديد اردت أن أقدم لكم إضافة إقرأ المزيد لكن بتطورات و شكل جديد و هي مختلفة عن السابقة لأنها لا تنعطب أبدا متل العادية
هي أيضا إضافة تعتمد على الجافاسكريبت و تغيير الوسوم بعد تحميل الصفحة
نبدأ الشرح :
أولا : إذهب إلى القالب و إبحث عن
</head>
ثم ضع فوقه / قبله هذا الكود :
<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by 3rab-help.com
// URL: http://www.3rab-help.com/?p=1366
//<![CDATA[
var configSummary = {
thumbnailSize: 100, // طول و عرض الصورة في الملخص
summaryLength: 300, // عدد الحروف في الملخص
noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // الصورة الإفتراضية في حال عدم إحتواء الموضوع على صورة
};
function createPostSummary(a,b,c) {
var text, doc = document, d = configSummary,
copyFrom = doc.getElementById(a).value,
pasteTo = doc.getElementById(b),
postThumbnail = (c === "") ? d.noThumbUrl : c;
text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '…';
}
//]]>
</script>
ثانيا : إبحث عن هذا الكود :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear:both;'/> <!-- clear for photos floats -->
</div>
بعد أن تجده عوضه كاملا بهذا الكود :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<textarea expr:id='"postData-" + data:post.id' style='display:none;'><data:post.body/></textarea>
<p class='post-summary' expr:id='"summaryContainer-" + data:post.id'>
<!-- for non/inactive JavaScript browsers -->
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
</b:if>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
<!-- end for non/inactive JavaScript browsers -->
</p>
<p class='post-more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'>
<data:post.jumpText/>
</a>
</p>
<script>createPostSummary("postData-<data:post.id/>","summaryContainer-<data:post.id/>","<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>");</script>
</b:if>
</b:if>
<div style='clear:both;'/> <!-- clear for photos floats -->
</div>
ثالثا : إبحث عن :
]]></b:skin>
ثم ضع قبله /فوقه هذا الكود
(عرض الصورة في اليمين على الملخص)
.post-thumbnail {
display: block;
float: right;
margin: 0.2em 0 0 1em;
}
(عرض الصورة على اليسار في الملخص)
.post-thumbnail {
display:block;
float:left;
margin:.2em 1em 0 0;
}
بالنسبة للنسخة العادية من قوالب البلوجر قد تجد هذا الكود بدل الكود الأول :
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear:both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both;'/> <!-- clear for photos floats -->
</div>
</b:if>
عوضه كامل بالكود السابق :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<textarea expr:id='"postData-" + data:post.id' style='display:none;'><data:post.body/></textarea>
<p class='post-summary' expr:id='"summaryContainer-" + data:post.id'>
<!-- for non/inactive JavaScript browsers -->
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
</b:if>
<span itemprop='description'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</span>
<!-- end for non/inactive JavaScript browsers -->
</p>
<p class='post-more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'>
<data:post.jumpText/>
</a>
</p>
<script>createPostSummary("postData-<data:post.id/>","summaryContainer-<data:post.id/>","<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>");</script>
</b:if>
</b:if>
<div style='clear:both;'/> <!-- clear for photos floats -->
</div>
و أنتهى الشرح و شكرا لكم