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

auto read more with thumbnail السلام عليكم ورحمة الله وبركاته .. اليوم سنتعرف علي طريقة تلخيص التدوينات وعرض صوره مصغره لها او ما يعرف باقرا المذيد الاضافه سهل جدا تطبيقها فقط قم باتباع التالي :سجل دخول الي لوحة تحكم بلوجر.
  1. ثم  > عناصر تصميم الصفحه > ثم تحرير HTML.
  2. قم بحفظ نسخه احتياطيه من قالب مدونتك.
  3. ضع علامه على خانة توسيع القالب.
  4. ابحث عن </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://www.tqarob.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 -->
يمكنك تبديل كلمة "
Read more
" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :
 

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

Read more
.. بالكود التالي :

<img src="http://4.bp.blogspot.com/-r_1ZoAzrrJ8/Tw45t_J0LYI/AAAAAAAAAss/KmVbG50g-zI/s1600/read+more.gif" title="إقرأ المزيد" alt="إقرأ المزيد"/>
و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون باللون الأزرق برابط الصورة المراد تبديلها
ولا تنسى أن تساهم في نشر المدونة،في إنتظار تشجيعاتكم

أصدقاء(تطوير ويب)
تعليقات Facebook
19تعليقات Blogger

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

ŗ7èĽ ėŇŜáŇ يقول...

اخوي طبقت الشرح بس للاسف ماضبط معاي :)

مدونة تقارب يقول...

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

ghandour hassan يقول...

أخى الكريم نفذت الدرس والحمد لله تمت معى ولكن كرمك أخلاقك جعلنى اطمع فى سؤالك مرة اخرى ..
حاولت تغيير نوع الخط فى المدونة ليكون tahoma لكنى لست على دراية جيدة بلغة html فأرجو المساعدة

جعله الله فى ميزان حسناتك

tqarob weblog يقول...

@ghandour hassan
اخى العزيز انا تحت امرك باى شئ تريده في مدونتك .. بخصوص تغيير الخط .انا دخلت مدونتك ووجدتها باللغه الانجليزيه وخط tahoma للمدونات العربيه ولا يتناسق اطلاقا مع موضوعات بحروف لاتينيه.

tqarob weblog يقول...

@ghandour hassan
لا يوجد شئ في بلوجر ليس له حل .
انتظر غدا في مثل هذا الوقت موضوعا جديدا مفصلا عن الخطوط وفيه ستجد ما تتمناه واكثر

ghandour hassan يقول...

أكرمك الله أخى وشكرا جزيلا على مجهودك

ghandour hassan يقول...

أخى الكريم كيف حالك ..
لازلت متشوقا لموضوعك أتمنى ان أرى ابداعاتك قريبا

اتمنى لك دوام الصحة والعافية

tqarob weblog يقول...

@ghandour hassan اعتذر عن التاخير اخي العزيز غندور قد شغلتني بعض الامور خارج نطاق التدوين ولكن سوف اضع موضوعا شاملا عن الخطوط اكرر اعتذاري لشخصك الكريم

ghandour hassan يقول...

أخى الكريم أعانك الله على رزقك وسعيك ..
أما انا فقد حاولت تغيير التامبلت ولكن واجهتنى مشكلتان أرجو افادتى فيهما:
المشكلة الاولى اننى غيرت نوع ولون خط عنوان المدونة باستخدام خطوط بلوجر لكنها تظهر فى الصفحة الهوم فقط وعندما ادخل اى صفحة اخرى يظهر العنوان القديم

المشكلة الثانية ان تقنية اضافة صندوق الفيس بوك بتقنية الجى كويرى حاولت ازالتها من التامبلت الجديد بكل الطرق لكن دون فائدة

الغريب ان حجم التامبلت كبر مع انى جربت التامبلت على مدونة تجاربى http://be-ur-slf.blogspot.com/

أرجو الا اكون قد أطلت فى طلبى

ghandour hassan يقول...

أخى الكريم جزاك الله خيرا عما قدمت لنا من معلومات وجعله فى ميزان حسناتك ان شاء الله ..لقد حاولت مرارا فى تعديل التامبلت حتى نجحت اخيرا والحمد لله ..
لم يتبقي سوى رأيك الشخصى ان احببت :)

tqarob weblog يقول...

@ghandour hassan
اخي غندور بكل اصدق اقوم لك ان هذا الرابط http://importexportb.blogspot.com/
ابهرني جدا شكلا وتنسيقا وكل شئ.

ghandour hassan يقول...

الحمد لله ..أسعدنى رأيك كثيرا
أدام الله عليك محبة الناس

tqarob weblog يقول...

@ghandour hassan
بارك الله فيك علي كلامك الطيب وصدقني ما قلت كلامي مجامله بل هي الحقيقه. استمر بالتوفيق لك اخي العزيز.

ghandour hassan يقول...

أخى الكريم ..كيف حالك
ارجو مساعدتك الطيبة في مشكلة واحهتنى فى التعديل على القالب
حاولت اضافة خاصية اقرأ المزيد المتحركة او الثابتة او اللينكات
حاولت اضافة ايضا صندوق تعليقات الفيس بوك وبعض الاضافات الاخرى
المشكلة ان القالب لم يقبل اى من هذه الاضافات !!

أرجو المساعدة

tqarob weblog يقول...

@ghandour hassan
مرحبا اخي قم بزيارة تلك الصفحه وقم بتعبئة النموذج الموجودفي الصفحه تك http://www.tqarob.com/p/free-technical-support.html
واشرح ماتريده باستفاضه مع مراعاة رفع قالبك من خلال النموذج وكتابة الاضافات التي ترغب بها . وان كنت ترغب في اضافة تعليقات الفيس بوك . يجب عليك كتابة اسم حسابك ورقمك السري ولا تخشى شيئاعلى سرية معلوماتك فهي لن تصل من خلال النموذج لاحد غيري. تقبل مودتي.

tqarob weblog يقول...

@ܓܨ بہرقے آلہشہ.¸.ـٍـوقے ܓܨ
منور كل مواضيعى بمرورك العطر
تقبل احترامي اخى الغالي

إرسال تعليق

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