طريقة إضافة خاصية "إقرأ المزيد"وتلخيص التدوينات مع الصور

عطر الجنه

كاتب محترف
upload+read+more.png


upload+read+more+blogger.png

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
</head>​
قم بلصق الكود التالي قبله مباشرة :ملاحظة : عند تطبيقك لهذا الكود سوف يتم عرض صورة الملخص على اليسار ,ولعرض صورة الملخص على اليمين ،تجاهل هذا الكود وقم بلصق الكود الذي يليه.

<****** type='****/java******'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</******>
<****** src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='****/java******'/>​
الصورة في يمين النص
<****** type='****/java******'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</******>
<****** src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='****/java******'/>​
وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :
<****** type='****/java******'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</******>
<****** src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='****/java******'/>​

والآن قم بالبحث عن الكود التالي :
<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><****** type='****/java******'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</******> <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>​
يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :
cool****465108368.jpg

كما يمكنك تصميم صورة جديدة عن طريق أكثر من 10 مواقع متخصصة فى تعديل الصور اون لاين. وبعد ذلك قم بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

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

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

مواضيع مماثلة

أعلى