اضافة خاصية قراءة المزيد وصورة مصغرة اتوماتيكيا

بسم الله الرحمن الرحيم

مثال للخاصية

طريقة اضافة خاصية تابع القراءة او اقرا المزيد بشكل جمالى واتوماتيكيا بدون عمل فاصل فى كل مشاركة

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

كما انها تسهل من تحميل صفحة المدونة الرئيسية .

ولكن الطريقة اليدوية المعروفة بالفاصل الموجود فى شريط ادوات محرر بلوجر ، لا توفر الشكل الجمالى الى جانب انها يدوية

ولكى تضيف هذه الخاصية لتكون اتوماتيكية فى كل مشاركة تضيفها او المشاركات المضافة بالفعل

توجه الى لوحة تحكم المدونة ثم توجه الى قالب ثم تحرير HTML ثم ضع علامة على توسيع القالب

وابحث عن هذا الكود

<data:post.body/>

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

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>اقرأ المزيد ...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

ثم قم بالبحث عن هذا الكود

</head>

ثم ضع هذا الكود قبله مباشرة

 <script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

الاعدادات التى يمكنك تعديلها حسب رغبتك الشخصية

summary_noimg = 430; ارتفاع المشاركة بدون الصورة

summary_img = 340; عرض المشاركة بدون الصورة

img_thumb_width = 120 ; عرض الصورة

img_thumb_height = 100 ; ارتفاع الصورة 

imgtag = '<span style="float:left;

 يمكنك تغيير left الى right اذا اردت ان تجعل الصورة جهة اليمين

لا تنسونا بصالح دعائكم ولا تحرمونا من مشاركاتكم 

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
دروس مدونات بلوجرl اشهار بلوجرl