الخميس، 19 ماي 2011

الدرس الخامس : اضافة رابط اقرأ المزيد





هذا موضوع لتجربة اضافة رابط اقرأ المزيد, الجملة الاولى هي مدخل للموضوع و تظهر لوحدها عند استعراض قائمة الرسائل.



لعمل ذلك : اضغط على الزر : ادراج رابط انتقال

النص الذي يظهر في الرابط هو : مزيد من المعلومات >>
الان نريد تغييره بنص اخر مثلا : تابع القراءة هنا
الامر سهل اذهب الى القائمة العلوية و اضغط على : تصميم
الان قم بتحرير مربع المواضيع في وسط الصفحة , مثلا هنا اسمه : رسائل المدونة الإلكترونية
انقر على تحرير و في النافذة الجديدة
يوجد الحقل : نص رابط صفحة التدوينات
و فيه النص : لمزيد من المعلومات >>
غيره بما شئت وقم  بحفظ التغييرات عد الى الصفحة الرئيسية و للتحقق من نجاح الطريقة.

شرح : الأستاذ سامي
أو تابع الدرس مع الصور

















الطريقة الثانية
وهي اضافة كود اقرأ المزيد ليظهر بشكل اوتوماتيكي في كل تدويناتك 

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

والآن قم بالبحث بالاستعانة  ب (ctrl+F ) على الكود





</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>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/>
الصورة في يمين النص
<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 src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/>
وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :
<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 src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/>

والآن قم بالبحث عن الكود التالي :
<data:post.body/>
ثم قم بإستبدالة بهذا الكود :
<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://abu-iyad.blogspot.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/><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a></b:if>
يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :

وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>
و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون باللون الأزرق برابط الصورة المراد تبديلها






مصدر الطريقة الثانية : مدونة أبو إياد



abuiyad

0 التعليقات:

إرسال تعليق