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

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

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

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

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

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

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

<!-- خاصية www.arabes.comاقرا المزيد --><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 removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } 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><!-- خاصية www.arabes.comاقرا المزيد -->

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

<!-- خاصية www.arabes.comاقرا المزيد --><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 removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } 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><!-- خاصية www.arabes.comاقرا المزيد -->

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

<!-- خاصية www.arabes.comاقرا المزيد --><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 removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } 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><!-- خاصية www.arabes.comاقرا المزيد -->

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

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

نبحث هذا الكود : <data:post.body/> 

ستجد ان هناك 2 او 3 اكواد على حسب القالب  على الاغلب يكون الكود الثاني

قم بحذف كود  <data:post.body/>  ووضع هذا الكود

<!-- خاصية www.arabes.comاقرا المزيد --><b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> </b:if><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <div style='float:left;margin-left:10px;margin-top:15px;'> <a expr:href='data:post.url'>إقرأ المزيد</a><br /> </div> </b:if><br /> </b:if><!-- خاصية www.arabes.comاقرا المزيد -->

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

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