شرح مفصل لطريقة اضافة زر 'اقرأ المزيد' مع طريقة التعديل عليه

بسم الله الرحمان الرحيم 

نقدم لكم شرح مفصل لطريقة اضافة زر اقرأ المزيد 

وتلخيص مواضيعك الى اي عدد من الكلمات التي تريدها 

قبل ان نبدأ بتغيير اي شيء يجب عليك اخذ نسخة احتياطية من قالب مدونتك 

بعد ذلك تابع الشرح خطوة بخطوة 

اولا ادخل للمدونة => إختر " تصميم"  => " تحريرHTML "

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

لتقوم بالبحث  Crtl+F

</head>

الان قم بنسخ ولصق الكود التالي فوقه مباشرة 

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 300; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 180; /* عرض الصورة في الملخص*/
img_thumb_width = 220; /*طول الصورة في الملخص */
</script>
<script src='https://bloggerAdsenSeo.googlecode.com/svn/trunk/Auto-readmore-right.js' type='text/javascript'/>

يمكنك التغيير على الكود كما تريد

يمكنك تغيير صورة الملخص الموجودة على اليمين و لعرضها على اليسار

غير كلمة Right التي باللون الاحمر الى Left

- الان نذهب الى خاصية الزر اقرأ :

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

<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:left;'><a expr:href='data:post.url'>إقـرأ المزيـد..</a></span>
<a href='http://bloggeradsenseo.blogspot.com/2013/02/read-more-for-blogger.html' style='display:none;'/><a href='http://bloggeradsenseo.blogspot.com' style='display:none;'>bloggeradsenseo</a> </b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

لتغيير زر 'اقرا المزيد' وجعله على اليمين 

نغير ما باللون الازرق كلمة Left الى Right

لتغيير كلمة 'اقرأ المزيد' الى 'اكمل الموضوع' او 'شاهد اكثر' او اي شيء تريده غير ما باللون الاحمر 

- الان نذهب الى التعديل على ستايل كلمة اقرأ المزيد :

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

]]></b:skin>

بعدما تجده قم بنسخ ولصق اكواد ال Css التالية  فوقه مباشرة

.rmlink {
  border-top-right-radius: 13px;
  border-bottom-left-radius: 9px;
  background: white;
  float: left;
  padding: 7px;
  border-bottom: 3px solid red;
  border-top: 3px solid red;
}
.rmlink a {
  color: black;
  text-decoration: none;
  font-family: DroidKufi-Bold;
  font-size: 14px;
}
.rmlink:hover {
background:  #44b3cd;
color: red;
}

يمكن التعديل عى الاكواد كما تريد 

قم بحفظ الموضوع وارجع الى مدونتك وشاهد النتيجة 

تم الشرح بواسطة مدونة لنرتقي

اي مشكلة تصادفك لا تتردد في مراسلتي

-

-

من فضلك قم بنشر الموضوع اذا اعجبك:

اترك تعليقا أخي الكريم :