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)