اضافة اقرأ المزيد لمدونات بلوجر مع الصورة وفقرة نصية

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

1. صورة مصغرة: وهي الصورة الأولى التي يتم اضافتها للمشاركة
2. فقرة صغيرة: نص مقتطف من المشاركة ويمكن التحكم في طوله
3. اقرا المزيد: لقراءة بقية الموضوع يكفي أن ينقر الزائر على الرابط وسيتم أخذه للمشاركة المعنية.

المميز في هذه الأداة أنها تستعمل أكواد قصيرة وخفيفة، وهو أمر جيد بالنسبة لسرعة تحميل المدونة.

اقرأ المزيد لمدونات بلوجر

بعد تعرفنا على الأداة شكلا ومضمونا، دعونا الآن نرى طريقة اضافتها على مدونات بلوجر.

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

لإضافة هذه الميزة أو الخاصية على مدونتك، اتبع الخطوات التالية:

فتح أداة تغيير القالب

من واجهة المدونة قم بالنقر على قالب ثم تحرير HTML

اضافة الكود الأول

قم بالنقر في أي مكان وسط القالب ثم Ctrl+F من لوحة المفاتيح للبحث عن هذا الكود: <data:post.body/>

بعض القوالب تتوفر على هذا الكود مرتين أو أكثر، قم بالعمل على الأخير بالنقر على Enter لمرات عديدة حتى ايجاده. وبعد ذلك قم بتعويضه (مسحه وضع مكانه) بهذا الكود:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:left;'><a expr:href='data:post.url'>المزيد »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

اضافة الكود الثاني

قم بالبحث مرة أخرى عن الكود التالي:  </head>

ومن فوقه اضف الكود التالي:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; text-decoration: none;
padding: 5px;
background-color: #ddd;
border: 1px solid #bbb;}
</style>
</b:if>
</b:if>

حفظ التغييرات

ممتاز، لقد انتهيت قم الآن بحفظ التغييرات وشاهد كيف اصبحت مدونتك.

إذا اردت التحكم في طول الفقرة المقتطف التي تظهر مع الصورة وقراءة المزيد، قم بتغيير القيم التالية في الكود الثاني بما تريد:
490: الفقرة بدون صورة
400:  الفقرة مع الصورة