الدرس 29: كيفية اضافة خاصية إقرأ المزيد على بلوجر و طرق التعديل عليها

علوم و تقنيات

اخر تحديث :

شرح الطريقة الصحيحة لإضافة وإستخدام خاصية "إقرأ المزيد"وتلخيص الصور و التدوينات على الصفحة الرئيسية لمدونة بلوجر blogger مع صور الخاصة بالايقونة إقرأ المزيد

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

الطريقة موضحة فى فيديو تجدونه اسفل هذا الموضوع

add-read-more-summarize-topics-for-blogger

اول شئ نقوم به هو اختصار المواضيع على الصفحة الرئيسية لمدونة بلوجر
نبحث عن هذا الكود </head> ثم نضع احد الاكواد التالية فوقه مباشرة
قم باختيار احد الاكواد التالية على حسب موقع طهور صور المواضيع فى الصفحة الرئيسية

1- لجعل صور المواضيع تظهر على اليمين

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</script><br />
<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {   
        imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }

var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
    div.innerHTML = summary;
}

//]]>
</script>

2- لجعل صور المواضيع تظهر على على اليسار

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</script><br />
<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }

var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
    div.innerHTML = summary;
}

//]]>
</script>

3- لجعل صور المواضيع تظهر فى الوسط

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</script><br />
<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {   
        imgtag = '<div class="separator" style="clear: both; text-align: center;">
<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }

var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
    div.innerHTML = summary;
}

//]]>
</script>

summary_noimg = 250; عدد الأحرف الظاهرة إن لم تكن هناك صورة
summary_img = 200; عدد الأحرف الظاهرة مع وجود صورة
img_thumb_height = 150; إرتفاع الصورة
img_thumb_width = 150; عرض الصورة

- الان طريقة اضافة عبارة او صورة " إقرأ المزيد "

نبحث هذا الكود : <data:post.body/>
ستجد ان هناك 2 او 3 اكواد على حسب القالب على الاغلب يكون الكود الثاني
قم بحذف كود <data:post.body/> ووضع هذا الكود

قم بتغيير left الي right إن أردت جعل كلمة إقرا المزيد على اليمين

<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>

هذه صور يمكنك استعمالها ما عليك الا استخدام روابطها ووضعها فى مكان "رابط الصورة"