الجمعة, ديسمبر 30, 2011

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

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

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

الأمر سهل وبسيط ويتعلق بوضع وتغيير بعض الأكواد, فقط قم بما يلى :

1- إذهب إلى ( مسودة لوحة تحكم بلوجر الإفتراضيه ) وإختر المدونه التى تريد إضافة الخاصيه لها وذلك بالضغط عليها.
2- من القائمه الجانبيه إضغط على ( قالب ) .
3- قم بالضغط على ( تحرير HTML ) حتى يفتح لك صندوق التحكم فى أكواد المدونه.
4- ستظهر لك رسالة تنبيه قم بالضغط على ( متابعه ) .
5- قم بتحديد إختيار ( توسيع قوالب عناصر واجهة المستخدم ) حتى يظهر لك الكود كاملا أمامك.
6- قم بالبحث عن الكود التالى
</head>
7- ضع بعده مباشرة الكود التالى
<!-- 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 -->
8- قم بالبحث عن الكود التالى
<data:post.body/>
9- قم بإستبداله بالكود التالى
<!-- 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 -->
10- قم بحفظ القالب فقد إنتهت التعديلات وأصبحت مدونتك جاهزه للشكل الجديد.

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

28 تَعْلِيق:

  1. رائع ياسو
    انا عملتها وطلعت جميلة زى ما انا كنت عايزها
    ميرسى كتير كتيررررررررررررررررررررررر
    جزاك الله كل خير


    شابوه

    ردحذف
  2. حلوه شابوه دى .... أى خدعه

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

    ردحذف
  4. الف عافية ع الشرح وربي استفدت :)

    ردحذف
  5. السلام عليكم الأخ ياسر،شكرا ....جاري التطبيق

    ردحذف
  6. جزااااااااااااااااااااكم الله كل خير .. كنت ابحث عن هذا الشرح كثيرا

    ردحذف
  7. جربتها ونجحت شكرا كتير أخي العزيز
    لكن لي استفسار مهم جدا لا تظهر عندي غير 5 تدوينات فقط كمصغرات
    رغم أن المدونه بها حوالي 20 تدوينة فكيف تظهر ال20 تدوينة في كمصغرات في الصفحة الرئيسية للمدونة
    أنا جربت دخلت على الإعدادات و جعلت الحد المسموح به للمدونات في الظهور هو 30 فلم تظهر غير الحمس تدوينات فقط
    فهل هناك تعديل معين في الكود يسمح بظهور جميع التدوينات كمصغرات ؟
    وفي إنتظار ردك أخي العزيز

    ردحذف
    الردود
    1. السلام عليك اخي الكريم
      اولا عند وضعك لــ30 تدوينة في الصفحة الرائيسية للمدونة ,سيؤثر دلك في المدونة وستصبح بطيئة جدا لحد ان الزوار سوف يقومون بالانسحاب فورا من مدونتك ومن الافضل عدم تجاوز عدد التدوينات في المدونة اكثر من عشر تديونات لضمان سرعو كفاءة المدونة

      حذف
    2. كلامك مضبوط ميه فى الميه ... شكرا على التعقيب

      حذف
  8. انا مش لاقى الكود ؟؟؟

    ردحذف
  9. ؟؟؟؟ مش لافى الكود

    ردحذف
  10. إذا سمحت أخي الكود ما لقيته

    ردحذف
  11. اشكرك يا صديقي ممتازة

    ردحذف
  12. شكرا لك
    مدونة كل يوم معلومة ثقافية
    http://dailyculturalinfo.blogspot.com

    ردحذف
  13. انا ازاي اعمل كدة في صفحة الاقسام ياعني القسم

    ردحذف
  14. شكراا حبيي على الموضوع بس أنل مو لاقي
    ممكن مساعده

    ردحذف
  15. فين



    مش موجود
    ارجو الرد

    ردحذف
  16. انا عملتها وطلعت جميلة زى ما انا كنت عايزها جزاك الله كل خير
    gooooooooooooooooooodddddd
    http://succesenvie.blogspot.com/

    ردحذف
  17. رووووووووووووووعة

    ردحذف
  18. الله يباركلك و ربنا يوفقك
    شكرا جزيلا لك
    مدونتى ahla-bramj

    ردحذف
  19. أزال المؤلف هذا التعليق.

    ردحذف
  20. تشكر على هذا الشرح الاحترافي

    زورونا على : www.st-tek.blogspot.com

    ردحذف
  21. شكرا تحياتى لك
    مدونة محترفين عرب


    http://www.prooarab.com/

    ردحذف
  22. (h) (h) (h) (h) (h) (h) (h) شكرا جزيلا اللله يرحم والديك شكرا

    ردحذف