اضافة خاصية " اقرا المزيد " لتلخيص التدوينات

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

اولا اذهب الى لوحة تحكم المدونة ثم اذهب الى قالب تم قم باخذ نسخة منه بعد ذلك اضغط على زر تحرير HTML و ابحث عن هذا الكود 
<head/>

و الان اذا كنت تريد من الصورة ان تظهر على اليسار استعمل الكود التالي :

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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(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>

اما اذا كنت تريد من الصورة ان تظهر على اليمين استعمل الكود التالي :

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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(img.length>=1) {    
        imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

و اذا كنت تريد من الصورة ان تظهر في الوسط كمدونتي استعمل هذا الكود :

<script type='text/javascript'>

summary_noimg = 250;

summary_img = 200;

img_thumb_height = 150;

img_thumb_width = 150; 

</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(img.length>=1) {    

      imgtag = '<div class="separator" style="clear: both; text-align: center;"><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>

الاشياء الملونة هي :
summary_noimg = 250; عدد الأحرف الظاهرة إن لم تكن هناك صورة
summary_img = 200; عدد الأحرف الظاهرة مع وجود صورة
img_thumb_height = 150; إرتفاع الصورة
img_thumb_width = 150; عرض الصورة

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

و عندما تجده استبدله بهذا الكود

<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/>");</script>
</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>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class="rmlink" style='float:left;margin-left:10px;margin-top:15px;'>
<a expr:href='data:post.url'>إقرأ المزيد</a>
</div>
</b:if>
</b:if>

استبدل كلمة left بكلمة right اذا كنت تريد اظهار كلمة اقرا المزيد على اليمين

لاضافة css على الزر استعمل الكلاس rmlink

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

شارك الموضوع

كاتب الموضوع

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