الطريقة الصحيحة لإضافة وإستخدام خاصية إقرأ المزيد

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

والإضافة الثانية هي الإضافة التلقائية وهي المنتشرة في كل المدونات تقريبا لكل منهما مميزات وعيوب

مميزات الإضافة الأولى أنها بالفعل تكون فاصل يعفي الزائر من تحميل الموضوع بالكامل

عيبها أنها غير منسقة فكل موضوع يحمل شكل مختلف بحسب ما تكتب

أما مميزات الإضافة التلقائية هي أنها منسقة وممتازة في جعل شكل المدونة رائع

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

لذا الحل الأمثل هو دمج الإضافتين معاً ناخذ مميزات كل واحدة ونترك العيوب ليكون الناتج إضافة مثالية

أولا نقوم بإضافة خاصية إقرأ المزيد التلقائية

خذ أولا نسخة إحتياطية من قالبك لتجنب اى مشكلات

أدخل على تحرير القالب وعلم على خانة توسيع العناصر

إبحث عن هذا الوسم </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: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 = '<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 = '<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 style='float:left;margin-left:10px;margin-top:15px;'>
<a expr:href='data:post.url'>إقرأ المزيد</a>
</div>
</b:if>
</b:if>

وقم بتغيير left الي right إن أردت جعل كلمة إقرا المزيد على اليمين

ويمكن إستبدالها بصورة

بوضع الكود التالي بدلامن كلمة إقرأ المزيد

<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>

وهذه مجموعة صورة جاهزة لأزرار إقرأ المزيد

تحميـــــل

صورة معاينة للأزرار

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

قد يسأل البعض وماذا عن المواضيع القديمة التي لم يتم إضافة فاصل لها

ستظهر بشكل منسق هي أيضا ولكن ستظل عبئ في التحميل للزائر إن إستطعت يمكنك يوميا تعديل 5 مواضيع مثلا

أدخل واضف الفاصل فقط لن يأخذ منك خمس دقائق وخلال أيام ستجد أنك عدلت جميع مواضيعك

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

لذا سنحذف أحدهما وسنختار الخاصة بالإضافة المدمجة لانها تظهر مع بعض المواضيع وليس كلها

وهذا هو الكود إبحث عنه وإحذفه

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

دمتم في أمان الله

منشورة في: blogger widget, إضافات بلوجر