اضافة خاصية اقرأ المزيد على مدونات بلوجر بعد تحديث محرر html في بلوجر 2014

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

شرح اضافة خاصية اقرا المزيد بعد تحديث محرر html في مدونات بلوجر على القالب الحديث 

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

الشرح:
1.سجل دخول الى مدونتك اختر القالب من لوحة التحكم ثم اضغط على تحرير html


2.بعد الضغط على تحرير هتمل ابحث عن الرمز</head> ثم اضف الكود التالي 
فوق الرمز </head>

الكود
ملاحظة : عند تطبيقك لهذا الكود سوف يتم عرض صورة الملخص على اليسار ,ولعرض صورة الملخص على اليمين ،تجاهل هذا الكود وقم بلصق الكود الذي يليه.

<script type=’text/javascript’>var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
        <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 5px;”><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’>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</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 5px;”><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’>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</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 5px;”><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>





3. قم بالبحث عن الرمز<data:post.body/> بعد ان تجد الرمز هذا<data:post.body/> قم باستبداله بالكود التالي 

ملاحظة قد تجد اكثر من رمز واحد اذا لم تعمل الطريقة على اول واحد استعمل الثاني


<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><br/><data:post.body/>



<b:else/>



<b:if cond=’data:blog.pageType != &quot;item&quot;’>



<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> <span class=’rmlink’ style=’float:right;padding-top:20px;’><a expr:href=’data:post.url’>إقرأ المزيد…</a></span>



<a href=’http://www.abu-iyad.com/2010/07/read-more-for-blogger.html’ style=’display:none;’>Résumé</a><a href=’http://abu-iyad.blogspot.com’ style=’display:none;’>abuiyad</a> </b:if> <b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>



</b:if>







4.الان قم بوضع صورة بدل من كلمة اقرا المزيد الموضوعة باللون الاحمر داخل الكود استبدلها بما يناسبك من الصور التالية













<img src=”https://sites.google.com/site/lightbox007/photo/readmore.jpg” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>




 <img src=”
https://tech-weba.com/wp-content/uploads/2013/06/13-06-3410-10-59D985.png” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>





<img src=”https://tech-weba.com/wp-content/uploads/2013/06/13-06-3410-11-22D985.png” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>







<img src=”https://tech-weba.com/wp-content/uploads/2013/06/13-06-3410-11-46D985.png” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>







<img src=”https://tech-weba.com/wp-content/uploads/2013/06/13-06-3410-12-02D985.png



” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>










<img src=”https://tech-weba.com/wp-content/uploads/2013/06/13-06-3410-10-38D985.png” title=”إقرأ المزيد” alt=”إقرأ المزيد”/>

كيف تجد اكثر من رمز على سبيل المثال مثل هذا 
<data:post.body/>
حين تقوم بالبحث على الرموز انقر نقرة واحدة على الرموز داخل القالب لديك ثم اضغط من لوحة المفتيح على الاختصار ctrl+f سوف يظهر لك مربع صغير داخل القالب وليس بالاعلى قم بوضع الرمز داخل المربع ثم اضغط enter سوف يظهر الرمز المطلوب واذا كان هناك اكثر من رمز كرر الضغط على enter ان لم يظهر لك معناها ان لايوجد سوى هذا الرمز لديك

شاهد الصورة



تم تصغير الصورة انقر على الصورة لعرضها بشكل اوضح












لاي استفسار ضع تعليقك اسفل الموضوع وحظا طيبا