كيفية تحسين جودة الصور على مدونات بلوجر

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

نصائح لتحسين جودة الصورة في المدونة

1. لا تستخدم الصور الباهتة التي هي منقطة للغاية
2. اعتمد على عرض وطول واحد للصورة الاولى ومحاولة تغيير حجم الصور الخاصة بك باستخدام أي برنامج تحرير الصور ومن ثم تحميله على موقع الويب الخاص بك او المدونة.
3. تأكد من أن الصورة يجب ان تكون بصيغة PNG، JPEG وألا يكون حجمها كبير.

كيفية تحسين جودة الصورة في المدونة

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر
2. اختر قالب المدونة التي تود تطبيق الشرح فيها
3. اضغط على تحرير HTML

الطريقة الأولى

1. ابحث عن الوسم </head> و اضف الكود التالي فوقه:

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  // change the dimension variable below to be the pixel size you want
  var dimension = 500;
  // this identifies the PopularPosts1 div element, finds each image in it, and resizes it
  $('#PopularPosts1, #related-posts').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]></script>

ملاحظة:

- PopularPosts1 معناها اخر المواضع او المشاركات الشعبية.
- related-posts معناها المشاركات الاخيرة او مواضيع ذات صلة.

يمكنك استبدال ماهو باللون الأحمر (#PopularPosts1, #related-posts)، على حسب مكان الصور المراد إضهار جودتها بشكل جيد، على سبيل المثال وبالنسبة لمدونة تقني ويب، قمنا باستبدالها بـ .blog-posts

إذا لم يعمل معك هذا الكود JavaScript فـحـاول أن تـلاحــظ مـكــان تـواجــد الـصــورة...، فــأحـيـانــا تـكــون الـصــور الـداخــل أكــواد CSS كما في الصورة :

في هذه الحالة سنضيف هذا الكود، ونقيم بحذف السابق :

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  $('.blog-posts .thumb').find('a').each(function(n, a){
    $(a).attr({style : $(a).attr('style').replace('s72-c','s500')});
  });
});
//]]></script>

الطريقة الثانية

1. ابحث عن <data:post.thumbnailUrl/>، (قد تجد منه العديد، لكن تأكد من المكان الصحيح)، وقم بتغييره بالتالي :

<b:eval expr='resizeImage(data:post.thumbnailUrl, 500, "1:1")'/>

وعلى سبيل المثال، لو كانت الصور داخل الوسم img : فسنقوم بتغييره بالشكل التالي :


<img expr:src="resizeImage(data:post.thumbnailUrl, 500)" />

نـأمـل أن تـكـون هـذه الــتـدويـنـة قـد سـاعـدت بـعـض مـســتـخــدمـيـنـا فـي تـحـسـيــن جــودة الـصــورة فــي مـدونـاتـهــم...

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!