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

هناك الكثير من المدونات ومنها هذه المدونه تستخدم خاصية إختصار التدوينات فى الصفحه الرئيسيه مع وجود صوره مصغره بجانب التدوينه, ونلاحظ أن التدوينات متساوية الحجم دائما.

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

الأمر سهل وبسيط ويتعلق بوضع وتغيير بعض الأكواد, فقط قم بما يلى :

1- إذهب إلى ( مسودة لوحة تحكم بلوجر الإفتراضيه ) وإختر المدونه التى تريد إضافة الخاصيه لها وذلك بالضغط عليها.
2- من القائمه الجانبيه إضغط على ( قالب ) .
3- قم بالضغط على ( تحرير HTML ) حتى يفتح لك صندوق التحكم فى أكواد المدونه.
4- ستظهر لك رسالة تنبيه قم بالضغط على ( متابعه ) .
5- قم بتحديد إختيار ( توسيع قوالب عناصر واجهة المستخدم ) حتى يظهر لك الكود كاملا أمامك.
6- قم بالبحث عن الكود التالى

</head>

7- ضع بعده مباشرة الكود التالى

<!-- 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 -->

8- قم بالبحث عن الكود التالى

<data:post.body/>

9- قم بإستبداله بالكود التالى

<!-- Auto read more Start -->
<!-- http://ar-blogger-tips.blogspot.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 -->

10- قم بحفظ القالب فقد إنتهت التعديلات وأصبحت مدونتك جاهزه للشكل الجديد.

توضيحات للأكواد :

• تستطيع تغيير ( yes ) إلى ( No ) إن لم تكن ترغب فى وضع صوره مصغره.
• هذا السطر ( summary_noimg ) يعنى الملخص فى حالة عدم وجود صوره وتستطيع التحكم فى عدد الحروف التى تود ظهورها كما تشاء.
• هذا السطر ( summary_img ) يعنى الملخص فى حالة وجود صوره وتستطيع التحكم فى عدد الحروف التى تظهر فى الملخص بجوار الصوره كما تشاء.
• هذا السطر ( img_thumb_height ) يعنى إرتفاع الصوره بالبكسل وتستطيع تغييره كما تشاء.
• هذا السطر ( img_thumb_width ) يعنى عرض الصوره بالبكسل وتستطيع تغييره كما تشاء.
• تستطيع تعديل الكلمه ( Read more ... ) إلى أى كلمه تريد وضعها حسب رغبتك.