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

هناك الكثير من المدونات ومنها هذه المدونه تستخدم خاصية إختصار التدوينات فى الصفحه الرئيسيه مع وجود صوره مصغره بجانب التدوينه, ونلاحظ أن التدوينات متساوية الحجم دائما.

هناك الكثير من المدونين يودون إستخدام هذه الخاصيه لما لها من مميزات كثره جدا وأهمها جعل شكل المدونه جميلا, وأيضا تتيح عرض الكثير من التدوينات فى الصفحه الرئيسيه.

اللهم اغفر للمؤمنين و المؤمنات الأحياء منهم و الأموات

الأمر سهل وبسيط ويتعلق بوضع وتغيير بعض الأكواد, فقط قم بما يلى :
إذهب إلى ( مسودة لوحة تحكم بلوجر الإفتراضيه )  >> ( قالب )  >>  ( تحرير HTML )  >>  ( متابعه )  >>  ( توسيع قوالب عناصر واجهة المستخدم )

قم بالبحث عن الكود التالى  </head>

ضع بعده مباشرة الكود التالى

<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <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(thumbnail_mode == "yes") { 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> <!-- Auto read more script End -->

قم بالبحث عن الكود التالى   <data:post.body/>

قم بإستبداله بالكود التالى

<!-- Auto read more Start --> <!-- http://ar-blogger-tips.blogspot.com/ --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- Auto read more End -->

قم بحفظ القالب فقد إنتهت التعديلات وأصبحت مدونتك جاهزه للشكل الجديد.

توضيحات للأكواد :

• تستطيع تغيير ( yes ) إلى ( No ) إن لم تكن ترغب فى وضع صوره مصغره.
  علامات Technorati: بلوجر,اضافة,خاصية,اقرأ,المزيد,الصورة,شرح,مدونة,قالب,تحرير,مسودة
• هذا السطر ( summary_noimg ) يعنى الملخص فى حالة عدم وجود صوره وتستطيع التحكم فى عدد الحروف التى تود ظهورها كما تشاء.
• هذا السطر ( summary_img ) يعنى الملخص فى حالة وجود صوره وتستطيع التحكم فى عدد الحروف التى تظهر فى الملخص بجوار الصوره كما تشاء.
• هذا السطر ( img_thumb_height ) يعنى إرتفاع الصوره بالبكسل وتستطيع تغييره كما تشاء.
• هذا السطر ( img_thumb_width ) يعنى عرض الصوره بالبكسل وتستطيع تغييره كما تشاء.
• تستطيع تعديل الكلمه ( Read more ... ) إلى أى كلمه تريد وضعها حسب رغبتك.