الأحد، 27 ديسمبر 2015

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

بقلم: BR MED يوم الأحد، 27 ديسمبر 2015 القسم : | 0 التعليقات
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في الصفحة الرئيسية و بحيث يتم تلخيص المواضيع في عدة كلمات أو جمل يتم التحكم فيها من خلال عدد الأحرف التي تريد الظهور، بالأضافة إلى التحكم في إرتفاع و عرض الصور المصغرة للموضيع img thumbnail ، هذا كله يجعل مظهر المدونة متناسق مع عرض عدد أكبر من التدوينات في مساحة أقل ، ليكون سهل على الزائر تصفح المواضيع بكل سهولة.
و لكن المشكلة هي أن أغلب هذه السكريبتات بها أخطاء ، مما يجعل هذه الإضافة تطبق حتى على الصفحات الثابتة بالمدونة ، أما اليوم فقد أصلحت المشكل و قمت بجلب هذا السكريبت السهل في التركيب كي لا أطيل عليكم ننتقل للشرح.

1- نذهب للوحة التحكم بلوجرثم القالب ثم تحرير html . (خد نسخة إحتياطية )
2- ننقر و سط الأكواد ثم ننقر على الزرين ctrl و f دفعة واحدة ، ينبثق مربع البحث و نبحث عن الكود التالي: <data:post.body/> 
ملاحظة : قد تجد أكثر من واحد الأخير هو المقصود.
3- نستبدل الكود الذي وجدناه بهذا الكود :
<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/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>إقرأ المزيد »</a></span></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>
4- الآن نقوم بالبحث عن الوسم    </head> و نقوم بلصق هذا الكود قبله مباشرة:
<script type='text/javascript'>posts_no_thumb_sum = 490;posts_thumb_sum = 400;img_thumb_height = 160;img_thumb_width = 180;</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, pURL, pTITLE){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>.post-footer {display: none;}.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; }</style></b:if></b:if>

تعديلات على الكود:
بالنسبة لهذا الكود فهو يجعل الصورة في اليمين إذا أردت العكس قم بتغيرright ب left   و قم بتغيرleft ب right .
يمكنك أيضا تغير هذه التفاصيل:
490 عدد أحرف النص في حالة عدم وجود صورة
400 عدد أحرف النص مع وجود الصورة
160 إرتفاع الصورة
180 عرض الصورة
ثم قم بحفظ القالب
إنتهى الدرس أي إستفسار لاتتردد في ترك تعليق ، دمتم بود .

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r