اضافة اقرأ المزيد بتقنية الـ CSS لمدونات بلوجر

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

اولا اذهب الي لوحة تحكم بلوجر ثم قم باخذ نسخة احتياطية من قالبك توقعا لحدوث اي خطا. ثم نتبع الخطوات التالية :

توجه الى   قالب ثم تحرير html  و بعدها قم بتوسيع عناصر وجهة المستخدم عند الانتهاء من كل هذا انقر على F+CTRL من لوحة المفاتيح .

و ابحث عن الكود التالي :

</head>

1. 
   
2. و قم بلصق الكود التالي قبله/فوقه مباشر 

<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'/><font size="0"><a href=" http://www.weight-losssuccessstories.net"></a></font>

والان قم بالبحث عن الكود التالي

<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><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='' style='display:none;'>Résumé</a><a href='' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> </b:if><font size="0"><a href=" http://www.weight-losssuccessstories.net/ "></a></font>

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

ابحث عن الكود التالي

]]></b:skin>

وضع قبله او فوقه الكود التالي 

.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 }

والان قم بحفظ القالب ومبروك عليك الاضافة الرائعة .

.