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

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

1. ثم > عناصر تصميم الصفحه > ثم تحرير HTML.
2. قم بحفظ نسخه احتياطيه من قالب مدونتك.
3. ضع علامه على خانة توسيع القالب.
4. ابحث عن وضع قبله مباشرة الكود التالي।

[HTML]<!-- Auto read more script Start --><br><script type='text/javascript'><br>var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail<br>summary_noimg = 430; //summary length when no image<br>summary_img = 340; //summary length when with image<br>img_thumb_height = 200;<br>img_thumb_width = 200;<br></script><br><script type='text/javascript'><br>//<![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){ <br> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); <br> } <br> } <br> strx = s.join(""); <br> }<br> 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) { <br> 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>';<br> summ = summary_img;<br> }<br> }<br> var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br> div.innerHTML = summary;<br>}<br>//]]><br></script><br><!-- Auto read more script End -->


والآن قم بالبحث عن الكود التالي :

[HTML]<data:post.body/><br><br>


ثم قم بإستبدالة بهذا الكود :



[HTML]<!-- Auto read more Start --><br><!-- http://www.tqarob.com --><br><b:if cond='data:blog.pageType == "item"'><br><data:post.body/><br><b:else/><br><b:if cond='data:blog.pageType == "static_page"'><br><data:post.body/><br><b:else/><br><div expr:id='"summary" + data:post.id'><data:post.body/></div><br><script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");<br></script><br><a class='more' expr:href='data:post.url'>Read more ...</a><br></b:if><br></b:if><br><!-- Auto read more End --><br><br>


يمكنك تبديل كلمة "

Read more

" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :

وذلك بإستبدال عبارة

Read more

॥ بالكود التالي :







[HTML]<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjfpBX68D8dv52S4KTNk0GOYidJ44xu84T_bGWSVRMaPZaZ-oJL46_vomsgZouuq9_c5MgSVXIYeObfWuS7epixtAO6kF9YQO6opN6NtteGBtD7z0reibEJZzeHmxD5lSyT1HUHisN_Sh3/s1600/read+more.gif" title="إقرأ المزيد" alt="إقرأ المزيد"/>

و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون باللون الأزرق برابط الصورة المراد تبديلها
ولا تنسى أن تساهم في نشر المدونة،في إنتظار تشجيعاتكم