الطريقة المثالية لإضافة خاصية اقرأ المزيد

الطريقة المثالية لإضافة خاصية اقرأ المزيد

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

فوق </head> أضف الكود التالي

<script type='text/javascript'>
posts_no_thumb_sum = 120;
posts_thumb_sum = 120;
img_thumb_height = 160;
img_thumb_width = 220;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:right; margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div class="semor">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

ثانيا ابحث عن الوسم <data:post.body/> و أستبدله بهذا الكود

    <b:if cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<a class="readmorlin" expr:href='data:post.url'>اقرأ المزيد</a>
</b:if>
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<data:post.body/>
</b:if>

مرحلة تنسيق الإضافة 


اسفل هذا الوسم ]]></b:skin> نضيف الكود التالي

<style>
.readmorlin {
float: left;
padding: 8px;
border-radius: 4px;
background-color: #2c3e50;
border-bottom: 2px solid #f39c12;
color: #fff;
font-weight: normal;
}
.readmorlin:hover {background-color: #f39c12; color:#fff;}
</style>


موفق ان شاء الله 




ليست هناك تعليقات: