اضافة زر اقرا المزيد و صورة مصغرة تلقائيا لمدونات بلوجر

طباعة الموضوع

Hanzo

عضو مسجل
6 جوان 2024
2,273
5
0


هل تبحث عن حل بسيط لاضافة زر اقرا المزيد لقالب بلوجر بسهولة ، اذا فانت في المكان المناسب ، اليوم سنقدم لكم الحل النهائي لاضافة زر اقرا المزيد باحترافي و سهولة يعمل تلقائيا بدون مشاكل ، قبل كل شيء قم باخد نسخة احتياطية من قالب تم اتبع الخطوات الموجودة في الشرح .

اضافة زر اقرا المزيد و صورة مصغرة تلقائيا لمدونات بلوجر

الطريقة هي لاضافة زر اقرا المزيد و اخد صورة مصغرة من الموضوع باحترافية و شكل تلقائي ، كل ما عليك هو اتباع الخطوات التالية بدون مشاكل ، كل ما عليك هو اتباع الخطوات التالية :

الخطوة الاولى :

انقر على القالب / Template تم تعديل HTML كما موضح في الصورة :

step.jpg

الخطوة الثانية :
قم بالبحث عن الكود التالي عبر النقل على CTRL + F :

HTML:
<data:post.body/>
تم عوضه بالكود التالي و اضغط على حفظ ، ان وجدت الكود اكثر من مرة فقوت بتعويضه مرتين :


HTML:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
الخطوة الرابعة :
قم بالبحث عن </head> تم ضع هذا الكود فوقه تم قم بحفظ القالب :

JavaScript:
<script type='text/javascript'>
  // Variables de configuration
  posts_no_thumb_sum = 490;
  posts_thumb_sum = 400;
  img_thumb_height = 160;
  img_thumb_width = 180;
</script>

<script type='text/javascript'>
  //<![CDATA[
 
  // Fonction pour supprimer les balises HTML d'un texte et découper à une longueur donnée
  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 + '...';
  }

  // Fonction pour créer un résumé et une vignette
  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 != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>

step2.jpg


يمكنك تغيير عدد الاحرف التي تريد جلبها و حجم الصورة المقتطفة بالبيكسل بتعديلك للقيم المكتوبة بالاحمر و الازر ، قم بعد ذلك بحفض القالب و مبركو عليك الاضافة ، في حالة واجهك اي مشكل فنحن مستعدون لمساعدتك قم بوضع تعليق او راسلنا على صفحتنا و سنساعدك على حل مشكلتك في اقرب وقت ممكن ، لا تنسى الانضمام الى صفحتنا في فيسبوك للتوصل بجديدنا .


 
التعديل الأخير بواسطة المشرف:

مواضيع دات صلة