طريقة رائعة لإضافة اقرأ المزيد إلى مدونات البلوجر بتقنية CSS

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

سوف نتعرف اليوم على طريقة إضافة اقرأ المزيد  إلى مدونات البلوجر بتقنية CSS,و هي الأداة الثي أعتمدها في موقعي,و من دون أدنى شك فهي أداة غاية في الروعة و تختلف عن الطرق التي تستخدمها أغلب المدونات لإضافة اقرأ المزيد,فبمجرد وضع المواس فوق زر اقرأ المزيد يأخد لون آخر.

تطبيق الاضافة:


1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إضغط على متابعة
5.إختار توسيع القالب إختار
6.إبحث بالضغط على   CTRL+F عن الكود التالي :

</head>

7.أضاف الكود التالي فوقه مباشرة :

<!-- http://trucsinformatiques.blogspot.com/ -->
<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'/>

8.الآن قم بالبحث عن هذا الكود التالي :

<data:post.body/>

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

9.قم بإستبدال إما الكود الأول أو الثاني على حسب القالب المستعمل بالكود التالي :

<!-- http://trucsinformatiques.blogspot.com/ -->
<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://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://trucsinformatique.com' style='display:none;'>trucsinformatique</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> </b:if>

ملاحظة :
يمكنك إستبدل كلمة إقرأ المزيد... باي كلمة تريدها.

10.الآن قم بالبحث عن هذا الكود التالي :

]]></b:skin>

11.أضاف الكود التالي فوقه مباشرة :

.rmlink a{ background: #F1F1F1; border: 1px solid #E6E6E6; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 2px #FFFFFF inset, 0 1px 1px #CACACA; color: #999999 !important; display: inline-block; font: 17px "Arial"; font-weight:700; text-align: center; padding: 2px 15px 2px; color: #999999 !important; padding-right:15px; padding-left:15px; padding-tpo:5px; padding-bottom:3px; margin-top:15px; -webkit-transition: background 0.4s ease-in-out; -moz-transition: background 0.4s ease-in-out; -o-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out; transition: background 0.4s ease-in-out; } .rmlink a:hover { background-color: #00A8D8; border-color: #fff; outline: medium none; color: #f3f3f3 !important; text-decoration:none }

ملاحظة :
يمكنك التعديل على ألوان الأداة من خلال الأكواد الملونة بالأزرق.

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


في الأخير قم بحفظ القالب.

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.