الخميس، 13 يناير 2011

اضافة اقرأ المزيد بمدونة بلوجر بطريقة آلية

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

</head> 
 ثم نضيف هذا الكود  قبله
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->
 ونترك القالب موسعا ونبحث عن هذا الكود

<data:post.body/>

ونستبدله بالكود التالي

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>اقرأ المزيد...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

ثم نحفظ القالب  ونتجه الى اعدادات المدونة  ومن خلال  وصلة التنسيق نختار
الحد الأقصى لما يتم عرضه  3 رسائل .
بالنسبة للمدونات باللغة الإنجليزية نغير اقراء المزيد ب read more
بالتوفيق ان شاء الله 

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

  1. مشكووووور أخوي جزاك الله خير

    بـعد بحث طويل و حوسه في المنتديات و المدونات لقيت الحل الأخير عندك الله يجزاك خير

    ردحذف
  2. السلام عليكم ..

    شكرا اخي على الطريقة .. نجحت معي لكن المشكلة تظهر فقط في الصفحة الرئيسية باقي الصفحات تظهر كاملة ..

    هذي مدونتي
    http://www.cakeobake.com/

    ردحذف
  3. لقد أجبرتني للتعليق بهذا الموضوع الرائع ولا تدري كم هذا أنقذني من فوضوية المدونة فجزاكم الله كل كل كل خير

    ردحذف
  4. الله عليك تسلم بجد وهذه مدونتى http://mktbtelktoob.blogspot.com/



    انت فنان بجد

    ردحذف
  5. شكرا لك وهذه مدونتى
    http://modawantyxp.blogspot.com

    ردحذف
  6. انا الاخر ساقول لك بارك الله فيك

    ردحذف