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

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

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

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

قم بالذهاب الي تصميم > ثم الي تحرير HTML قم بالضغط على علامة توسيع قوالب واجهة المستخدم" .

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

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

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

قم بحذف الكود التالي <data:post.jumpText/>ثم قم بوضع رابط الصوره مكانه.
ليكون الكود بهذا الشكل:

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

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

تستطيع بكل سهوله اضافه تاثير جمالي وانيق بتقنية ال css علي عبارة اقرا المذيد التي تختارها انت كما هو موجود بالمثال الذي باول التدوينه تلك وذلك بالبحث عن الكود التالي ]]></b:skin> ووضع الكود الموجود بالاسفل قبلة مباشرة:

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

تستطيع من خلال العبارات المعلمه باللون الاحمر التحكم في لون العباره بدون وضع الماوس عليها ولونها عند وضع الماوس عليها وهو مايطلق عليه تاثير الهوفر وتستطيع من خلال هذا "float: right"ان تتحكم في اتجاه العباره سواء يمينا او يسارا .

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

يمكنك الاستفسار اكثر عن تلك الاضافه وتخصيصها من خلال ترك تعليق بالاسفل 

تنويه: تلك الاضافه ليست لها علاقه لا من قريب ولا من بعيد باضافة اقرا المذيد المنتشره  والمعروفه للجميع

فالاضافه التي بتدوينتي تلك تعتمد اعتمادا كليا علي اضافة اقرا المذيد التي تقدمها بلوجر في لوحة تحكم من خلال اضافة موضوع جديد

ولا تحتوي علي اكواد جافا سكربت مرفوعه علي مواقع اخرى .. بل تعتمد في اناقتها وشكلها علي تقنية ال css الرائعه..

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : طريقة اضافة اقرا المذيد في مدونة بلوجر بتقنية ال css بدون جافا سكربت | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات بلوجر, تنسيق القالب