9/09/2017

settings_overscan print announcement

أهلا..أصدقائي من بين التحسينات التي طرأت على منصة تطوير blogger  في الأونة الأخيرة ... قدم لنا بلوجر ميزة  القدرة على تغيير حجم الصور عبر بنية النماذج وربما لو تلاحظون في قسم (عشوائي)  المشاركات الشائعة على القائمة الجانبية عندنا الصور بحجم كبير وبأدق تفاصيلها فسابقا كان عند محاولة تكبير إطار الصورة أو العكس ستلاحظ أن شكلها بدأ في الإضمحلال وتشوه جودتها !!
فتضطر حين ذلك إما لتركها على التنسيق الإفتراضي ا أو إستعمال أكواد java لقلب القيمة المصغرة s72 إلى قيمة أكبر.




و هنا مثال تنفيذي لكود الصورة في أداة المشاركات الشائعة في السابق، سنرى شفرة من هذا القبيل تعمل على عرض الصور المصغرة:

 expr:src='data:post.thumbnailUrl' 

أما حاليا تسمح لنا الصيغة أدناه بتغيير حجم الصور المصغرة إلى أحجام أخرى غير 72 × 72 بكسل:

 expr:src='resizeImage(data:post.thumbnailUrl, 72)' 

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

    ملاحظة مهمة
    لا بد أن تكون قد سبق وأضفت أداة المشاركات الشائعة لمدونتك وإلا لن يظهر معنا الكود المطلوب
  • قم بالبحث عن إسم الأداة PopularPosts أو قم بإتباع التعليمات التي في الصورة
  • قم بتوسيع كود الأداة حتى تظهر معك الشفرة المطلوبة أنظر في الصورة التالية
  • وأخيرا ستجد الكود بهذا الشكل كما في الصورة تماما
  • 
     resizeImage(data:post.featuredImage, 72, "1:1") 
    
    التعديل على الكود
    الرقم 72 المحدد باللون قم بتغييره إلى الرقم 1600 وهو حجم الصورة الأصلي.
    الأن حجم الصورة أصبح طبيعي وستلاحظ تحسن لكن لن يظهر معك الفرق حتى تقوم بتكبير حجم الإطار الموجود داخله الصورة وهو غالباالوسم <div class='item-thumbnail'> فماتقوم به هو إضافة كود الستايل الخاص به وهو كالأتي..
    
    .PopularPosts .item-thumbnail {
        margin: 5px!important;
        position: relative;
        overflow: hidden;
        display: block;
        width: 100px;
        height: 100px;
        float: right;
    } 
    
    التعديل على الكود
    غير في قيمة الطولwidth: 100px; والعرض height: 100px; بمايناسبك إذا أردت جعل الصورة متجاوبة إستعمل القيمة % بدل القيمة px مثلا 100% تعني حجم ثابت يأخذ كامل المساحة على جميع شاشات عرض الأجهزة. 25% تسمح بوجود عنصر أخر في حالة توفر مساحة واسعة...وقس على ذلك...وأخيرا عند الإنتهاء من تعديلك على الكود قم بوضعه فوق الوسم ]]></b:skin> مع أكواد أداة المشاركات الشائعة .
    عارضة لمصمم القوالب
    تستطيع إستعمال هذه الميزة خارج إطار ما تم شرحه بإستعمال شفرة الأداة في مواضع تستدعي عرض أول صور البوست بالحجم الأصلي أو الذي تريده  كما شرحنا سابقا وكذلك توضيف رابط لصورة بديلة في حال عدم توفر صورة رئيسية في التدوينة .. كل ذلك في سطر واحد وهذا مثاله مع الأخذ في عين الإعتبار بنية الكود من أساسه..يمكنك تغيير رابط صورة البديلة إذا أردت.
    
    <b:with value='data:post.firstImageUrl? resizeImage(data:post.firstImageUrl, 1600, &quot;1:1&quot;): &quot;http://4.bp.blogspot.com/-MsdGmH4DnDg/W2L_BMuX99I/AAAAAAAADC4/MQoQCY5YhioyuG6dig17Rz9RvnrA6MG0ACLcBGAs/s1600/no-image-Flamingo.png&quot;' var='firstimage'>
                               <img alt='' border='0' expr:src='data:firstimage'/>
                                </b:with>