More

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

" Here you can search for everything you want and you will find it as soon as possible "

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

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

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

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

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

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

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

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

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

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

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

إبحث عن هذا الوسم </head> واضف فوقه أحد الأكواد التالية


You may also like  إضافة كود التبادل الاعلاني بشكل جميل للمدونة CSS




لجعل الصورة على اليمين ركب هذا الكود


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



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


Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker