طريقة اضافة اقرا المذيد في مدونة بلوجر بتقنية ال css بدون جافا سكربت

لرؤية مثال حى قم بزيارة الرابط التالي

مميزات تلك الاضافه هى شكلها الانيق بالاضافه انها بتقنية ال css ولا تعتمد على اكواد جافا سكربت مما يجعلها من اسباب سرعة التصفح ولتطبيقها يرجا اتباع ما بالاسفل

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

+ &quot;#more&quot;

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><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' expr:title='data:post.title'>مذيد من التفاصيل!</a>
</div>
</b:if>

طريقة اخرى لوضع صوره بدلا من العباره المكتوبه؟

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

اضافة شكل جمالي وانيق لعبارة اقرا المذيد؟

.jump-link a {
padding: 4px;
background-color: #000; /* If you want to have a background color to the Read more link otherwise delete it */
color: #fff; /* Changing the Jump Break link color */
}
.jump-link a:hover {
padding: 5px;
background-color: #fff; /* Changing the background color on hover otherwise same as above. */
color: #000; /* Changing the Jump Break link color on hover */
}

لرؤية مثال حى قم بزيارة الرابط التالي