طريقة اضافة اقرا المذيد في مدونة بلوجر بتقنية ال 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 الرائعه..
أصدقاء(تطوير ويب)
تعليقات Facebook
5تعليقات Blogger

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

عمر شكري يقول...

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

mona يقول...

السلام عليكم
بسم الله ماشاء الله على مدونتك بحق الله رائعه واستفد منها كثير برغم ان مدوناتى دينية .. اتمنالك التوفيق واسال المولى عز وجل تصل بحياتك الى اعظم المناصب وليس فى مدونة على النت

( مدونة تقارب ) يقول...

@mona
وعليكم السلام ورحمة الله وبركانة
الحقيقه عزيزتي منى عجزت عن التعبير وايجاد ردا يضاهي ماقلتيه في حقى
غير اني ساقول بكل سعاده ان دعواتك التي اسال الله ان يتقبلها هى اغلى واثمن شئ حصلت عليه من يوم افتتاح تلك المدونه المتواضعه وحتى يومنا هذا.
بارك الله فيكي وجزيتِ الجنه .

Fcb Sadooo يقول...

اخي الكريم انا طبقت كل ما قلت لكن لم اشاهد اي تغير
http://just2movies.blogspot.com/

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .