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

مرحبا لكل متابعي مدونة PH3ahmed


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

1.سجل الدخول إلى لوحة التحكم في المدونة
2.اختر القالب ثم اضغط على تحرير html
3.قم بالبحث عن الرمز التالي ]]></b:skin>
 اذا لم تجد الرموز التي اشير اليها إذهب إلى هذه الصفحة لتعرف طريقة العثور عليها
4.اضف الكود التالي فوق الرمز ] ] > < /b:skin>

.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='dp-thumbnail'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
     <span>No thumbnail</span>
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

واختر الحفظ ومبروك عليك

هل أعجبك الموضوع ؟

Share

Tweet