اضافة اقرأ المزيد لمدونة بلوجر بدون جافا سكربت

اضافة اقرأ المزيد بدون جافا سكربت

مساء الخير , اضافة اقرأ المزيد من اهم الاضافات التي يجب ان تتوفر قطعياَ في كل قالب بلوجر , فيوجد اضافة اقرأ المزيد بأستخدام الجافا سكربت وهي حقيقة لا افضلها لانها يصعب تعديلها حسب رغبتك وايضاَ عند تصميم قالب بلوجر فأننا نحاول قدر الامكان التخلص من الجافا سكربت الزائدة والتي لا يعتبر لها فائدة.
الطريقة اليوم عبارة عن اضافة اقراء المزيد ولاكن بدون استخدام الجافا سكربت بتاتاَ وبدون استخدام الـ css لاننا سنعتمد فقط على xml+html وسنحقق هذا الهدف.

اضافة اقرأ المزيد بدون جافا سكربت

طريقة التركيب :

يجب ان يكون القالب الذي تود تجربة الطريقة عليه خالي تماماَ من اضافة اقرأ المزيد بالجافا سكربت.
يجب اخذ نسخة احتياطيه من القالب قبل بدأ التعديلات .. للأحتياط.
ابحث عن <data:post.body />
قد تجد منه اكثر من واحد .. جربهم واحداَ واحداَ حتى تنجح.
بعد ايجاده استبدله بهذا الكود :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='bb-blog7lolblogger'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

ستلاحظ ان شكل التدوينات اصبح هكذا تقريباَ :

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

.bb-blog7lolblogger img {
float: right;
margin: 0 0 10px 10px;
}

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

يمكنك تخصيص الاضافة بشكل اكبر في حال توفرك على القليل من لغة CSS .

تخصيص اكثر :
يظهر رابط اقرأ المزيد اذا توفرت التدوينة على العلامة الشرطيه

وتستطيع اضافتها داخل التدوينة من خلال تحديد منتصف التدوينة وادراج رابط الانتقال التلقائي.

لتغير حجم الصورة اضف كود الجافاسكربت هذا فوق </head>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// change the dimension variable below to be the pixel size you want
var dimension = 240;
// this identifies the PopularPosts1 div element, finds each image in it, and resizes it
$('.bb-blog7lolblogger').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + 240)});
image.attr('width',dimension);
image.attr('height',180);
});
});
//]]></script>