شرح تركيب وتعديل اضافة اقرا المزيد

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

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


كود جعل الصورة في اليمين :

<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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: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>
قم بوضع الكود أعلاه فوق كود </head> بعد البحث عليه في صندوق تحرير القالب (لتسهيل الأمر قم بالبحث عنه عن طريق Ctrl+F).

كود جعل الصورة في اليسار :

<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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>
كما العادة اضفه فوق كود </head>

كود جعل الصورة في الوسط :

<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150; </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 = '<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>
ان كنت تود جعل الصورة تظهر في الوسط قم بتركيب الكود أعلاه قبل/فوق كود </head>


التعديل على اضافة اقرا المزيد :

للتعديل على الاضافة قم بتغيير الآتي الى مايناسب مدونتك :
  • summary_noimg = 250;      عدد أحرف الملخص في حالة عدم وجود اية صورة
  • summary_img = 200;          عدد الاحرف في حالة وجود صورة
  • img_thumb_height = 150;    الارتفاع الخاص بالصورة
  • img_thumb_width = 150;    عرض الصورة
الى هنا تكون قد قمت بتركيب وتعديل اضافة اقرا المزيد في مدونتك بنجاح.
ان اعجبك الموضوع لا تنسى ان تضغط على زر الاعجاب ومشاركته مع اصدقائك عن طريق ازرار المواقع الاجتماعية الموجودة في الـأسفل وأتمنى ان تكون قد استفدت من الموضوع.
لا أحل نقل الموضوع بدون ذكر المصدر
هل أعجبك الموضوع ؟
خدمة تصميم بنرات

هناك 7 تعليقات:

  1. مشكووووووووووووووووووووووووووور اخي على الموضوع

    ردحذف
    الردود
    1. مشكووور على مرورك الكريم وان شاء الله تستفيد معنا

      حذف
  2. شكرا صديقي على الطريقة

    ردحذف
  3. مشكوووووووور على الدرس

    ردحذف
  4. نجم زمانك يا معلم دة احنامنك نتعلم

    ردحذف

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013