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

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

هي أيضا إضافة تعتمد على الجافاسكريبت و تغيير الوسوم بعد تحميل الصفحة

نبدأ الشرح :

أولا : إذهب إلى القالب و إبحث عن

</head>

<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by 3rab-help.com
// URL: http://www.3rab-help.com/?p=1366
//<![CDATA[
var configSummary = {
    thumbnailSize: 100, // طول و عرض الصورة في الملخص
    summaryLength: 300, // عدد الحروف في الملخص
    noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // الصورة الإفتراضية في حال عدم إحتواء الموضوع على صورة
};
function createPostSummary(a,b,c) {
    var text, doc = document, d = configSummary,
        copyFrom = doc.getElementById(a).value,
        pasteTo = doc.getElementById(b),
        postThumbnail = (c === "") ? d.noThumbUrl : c;
    text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
    pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '&hellip;';
}
//]]>
</script>

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

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

بعد أن تجده عوضه كاملا بهذا الكود :

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    <b:else/>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
        <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>
          <!-- for non/inactive JavaScript browsers -->
          <b:if cond='data:post.thumbnailUrl'>
            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
          </b:if>
          <b:if cond='data:post.snippet'>
            <data:post.snippet/>
          </b:if>
          <!-- end for non/inactive JavaScript browsers -->
        </p>
        <p class='post-more-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
            <data:post.jumpText/>
          </a>
        </p>
        <script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
    </b:if>
  </b:if>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

ثالثا : إبحث عن : ]]> ثم ضع قبله /فوقه هذا الكود (عرض الصورة في اليمين على الملخص)

.post-thumbnail {
display: block;
float: right;
margin: 0.2em 0 0 1em;
}

2:47 ص