تجميل اضافة اقرأ المزيد | read more

سنتطرق اليوم لكيفية تعديل و تجميل اضافة "اقرأ المزيد" التي يكون شكلها غير محمس لمتابعة الموضوع حقا

بصورة أو عن طريق الCss أو فقط بتبديلها بعبارة أخرى

في البداية أنصحكم بأخذ نسخة احتياطية من القالب

سجل الدخول لمدونتك ثم اتجه نحو

Layout >> Edit HTML 

و لا تنسى وضع اشارة بجانب Expand Widget Templates

ابحث عن  

<b:if cond='data:post.hasJumpLink'> 

ستجد كود بهذا الشكل :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

احذف منه

+ "#more"

ليصبح لدينا كود بهذا الشكل :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'><data:post.jumpText/></a>
</div>
</b:if >

تغيير "اقرأ المزيد " بأي عبارة أخرى

ابحث عن هذه العبارة

<data:post.jumpText/>

ثم احذفها و ضع مكانها العبارة التي تناسبك

ملاحظة : ان لم تجدها فابحث عن العبارة الموجودة في مدونتك - أقصد عبارة "اقرأ المزيد"- ثم غيرها فقط

في النهاية سيظهر لنا كود بهذا الشكل :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'>تابع القراءة حبيبي</a>
</div>
</b:if >

وضع صورة مكان عبارة "اقرأ المزيد "

مجددا ابحث عن

<data:post.jumpText/>

ملاحظة : ان لم تجدها فابحث عن العبارة الموجودة في مدونتك - أقصد عبارة "اقرأ المزيد"-

احذفها ثم ضع صورتك بهذا الشكل

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'><img src="رابط الصورة هنا"></a>
</div>
</b:if >

اضافة : بعض الصور للتحميل من هنا

تزيين العبارة باستعمال الCss

ابحث عن 

]]></b:skin>

أضف قبلها أي فوقها مباشرة

.jump-link a {
padding: 4px;
float: left;
background-color: #000;
color: #fff;
}

 و عدل الكود بما يناسبك مثلا عدل العبارة بالاحمر لمكان الاضافة

Left يسارا

Right يمينا

و عدل الرمز بالأخضر للون الخلفية الذي يناسبك

و عدل الرمز بالأزرق للون خط العبارة