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

السلام عليكم و رحمة الله تعالى و بركاته في هذا الموضوع سنتطرق الى طريقة تلخيص مواضيع المدونة اي جعلها تظهر على شكل فقرة متبعة ب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

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

إقرأ المزيد

قالب بلوجر جميل للتحميل

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

مميزات القالب :
خفيف
به اماكن اعلانية مربحة
به اضافات اساسية
الوان مريحة
و العديد من المزايا التي ستكتشفها عند تجربته

عيوب القالب :
غير متوافق مع الشاشات
ليس به سلايدشو
و عيوب اخرى لم الحظها خلال فترة تجربتي للقالب

التعديل على القالب جد سهل و ليس به اي تعقيد لذلك لن اتطرق اليه

معاينة القالب

تحميل القالب

تعليق بسيط يكفي لتشجيعنا كي نعطيكم المزيد 

إقرأ المزيد