9/28/2017

settings_overscan print announcement
 Switching ميزة كغيرها من الميزات متعددة الإستعمالات ولايمكن حصرها في تطبيق معين ومانتكلم عنه إستعمالها كخاصية حصرية في المواقع المشهورة خصوصا المعنية بمحتوى ألعاب الفيديو  والمنتجات و المواقع المتخصصة في عرض القوالب..وربما قد لا حظت عند دخولك لأي صفحة موضوع لأحد هذه المواقع  أن الصورة الرئيسية هي نفسها خلفية للقالب (الواجهة) .. ففي هذا الموضوع سنريكم الطريقة الحصرية والسهلة لجعل صورة  المشاركة  تأخذ مكان لون أو خلفية القالب الرئيسية بل و الجميل في الأمر أننا قمنا ببعض التعديلات  حتى لاتضطر أنت  للتعديل على جميع الصور الخاصة بمدونتك ..فقط لصق كود الأداة داخل قالب مدونتك وستلاحظ بإذن الله تفعيل هذه الخاصية على جميع المشاركات حتى لو كانت ألف تدوينة :)




طريقة تركيب ميزة Switching على صور التدوينة


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

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

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

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
//<![CDATA[
var $rezImg = jQuery.noConflict();
$rezImg(document).ready(function(){
//resizeImage [replas size src]
$rezImg.fn.resizeImage=function(){var t=$rezImg("body").width(),e=/\/s\B\d{2,4}/;$rezImg("body").find("img").each(function(i,r){var a,d=$rezImg(this).height(),n=$rezImg(this).width(),o=n/d,s=t,c=Math.round(s/o);a=n>=d?s:c,(r=$rezImg(r)).removeAttr("width height"),r.css({"margin-left":"0",padding:"0","box-sizing":"border-box","box-shadow":"0 0 0 rgba(0, 0, 0, 0)",width:s+"px"}),r.parent().removeAttr("style"),r.attr({src:r.attr("src").replace(e,"/s"+a)}),r.attr("width",s)})},$rezImg("body").resizeImage(),$rezImg(window).resize(function(){$rezImg("body").resizeImage()});

//Switching [replas wall body]
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
target.style["background-attachment"] = "fixed";
target.style.width='100%';
});
//]]>
</script>
   </b:if> 
    معلومات عن الكود
    الكود المحدد بهذا اللون هو لـ العلامة الشرطية يجعل الميزة تعمل فقط على صور المشاركات (راجع للإستزادة)
    الكود المحدد بهذا اللون خاص بميزةSwitchingالتي تعمل على جعل صورة التدوينة كخلفية للواجهة.
    ملاحظة مهمة
    - في مايخص إسم الكلاس.post-bodyالموجود في كود ميزةSwitching أغلب القوالب تستعمل هذا الإسم لذلك في حالة لم تشتغل الإضافة فهناك إحتمال ضئيل أن إسم الكلاس مغاير وهذا مستبعد جدا. - والأمر الثاني هو تعارض رموز جيكويري لكننا قمنا بتنسيقه حتى لايتعارض مع الأكواد الموجودة في قالبك إذن فهذا مسبعد. - يبقى مشكل وحيد هو إفتقار قالب مدونتك لمكتبة الجيكويري المطلوبة وهذا ماستجده في المرفقات .

ملحق هام
1- الكود التالي هو لمكتبة jquery ، إنسخ الرابط <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> وأضفه فوق </head> إذا كان موجود أو أي إصدار آخر فلا داعي لإضافته
2- الكود التالي هو لإظهار أيقونات font-awesome ، إنسخ الرابط <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> وأضفه فوق </head> إذا كان موجود فلا داعي لإضافته أو قم بتحديثه (أخر تحديث 4.7.0)



add_commentإرسال تعليق

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

    ردحذف
    الردود
    1. ..لا شكر على واجب اخي
      بالنسبة لسؤالك عن كيفية عرض الصورة بنفس سرعة عرض المحتوى ..لاحظ أن هذا السكريبت يعمل بتقنية switching والتي غالبا ما تاخذ وقت وهذا ليس خلل لأنه مرتبط بسرعة القالب وخصوصا حجم قياس الصورة أنا لا أقصد طول وعرض الصورة وإنما الحجم بالـ KB لذلك انصحك أن تقوم بإستعمال هذا الموقع الرائع لتقليل حجم الصورة دون التأثير على جودتها
      الموقع من هنا https://goo.gl/CKm4LN
      طريقة إستخدامه سهلة كما انه يوجد شروحات حول هذا الموقع .. جرب مع تدوينة واحدة وقارن الفرق ...بالتوفيق

      حذف
  2. لم تنجح معي https://dfhgfjgfdfh.blogspot.com

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

      حذف
  3. ربي يوفقك او مرة استخدم اضافة وبدون مشاكل
    المهم اريد اخلية تكون للمنتصف وتنتهي يعني تختفي من الاسفل كيف.؟

    ردحذف
    الردود
    1. الرجاء التوضيح / هل تقصد انه عند التمرير لاتبقى الصورة ثابتة

      حذف