إضافة تغيير الخلفية تلقائيا

إضافة تغيير الخلفية تلقائيا

يوجد الآن مشاهدة التعليقات : 13

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

أظن أن الصورة تتكلم بدل الموضوع 😎 أليس كذلك؟ نعم إضافة تمكنك من تغيير خلفية موقعك أو مدونتك بخلفيات عديدة تتغير تلقائيا ، الأكواد المستعملة جافاسكريبت/جيكويري وقليل ما نشاهده هذه الإضافة بقوالب بلوجر ليس لها اثر رأيت معضمها في قوالب ووردبريس إلى أني بحثت ووجدت الإضافة على بلوجر وهاهي بين أيديكم وأنصح لمن سيستعملها أن يستعمل خلفيات أو صور بجودة عالية ايضا خلفيات نقية لكي لا تزعج الزائر بالنسبة للمقاس فهو تلقائي
في المعاينتان التاليتان إستخدمت خلفيات بالألوان و خلفيات بالصور
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/>  ضع الكود التالي فوقه
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
  "ضع هنا رابط الخلفية",
  "ضع هنا رابط الخلفية",
  "ضع هنا رابط الخلفية",
  "ضع هنا رابط الخلفية",
  "ضع هنا رابط الخلفية",
];

$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 1000});
var slideshow = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 3000);
//]]>
</script>
* ضع رابط الخلفية بدل الكتابة المحددة بالأصفر
* الرقم الأخير في الكود المحدد باللون الأزرق 3000 هو عدد تزامن تغيير الخلفية
نقصان في الرقم يعني توقيت سريع لتغيير الخلفية, زيادة في الرقم توقيت بطيئ في تغيير الخلفية
* بإمكانك إضافة خلفيات اخرى بتكرار الكود
مثال :
 "ضع هنا رابط الخلفية",
ملاحظة : قد لا تشتغل الاضافة إذا كنت تتوفر على إضافات تشتغل بالجيكويري
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 13 تعليقًا:

  1. دائما تبهرني بجديدك واصل يا مبدع
    سؤال كيف أدخل للون للخلفية بدل الصورة ؟

    ردحذف
    الردود
    1. إستعملت خلفية بألوان عملتها بالفوتوشوب سهلة ، لأنه لا يمكن إضافة كود الألوان

      حذف
    2. فهمتك بارك الله فيك :lv

      حذف
  2. مبدع واصل اخي
    شكرا

    ردحذف
  3. لا يمكنني ايجاد ال <head/>

    ردحذف
    الردود
    1. ضروري أن يكون انسخ الكود كما هو : </head>

      حذف
    2. بالنسبة لمشكل الهيد يجب ان تكتبه بيدك لانة يقع مشكل في النسخ ^^
      ljg lh p]j lud

      حذف
    3. عليك أن تنسخه من الجهة المناسبة لا غير.
      بخصوص المقاس ليس هناك مقاس محدد لأن كل شاشة تختلف بالمقاسات فإذا وضعتها بمقاس شاشتك قد تظهر عند اخر مشوهة لذا إن كنت ستستعمل هذه الإضافة فأنصحك باختيار خلفيات مخصصة للمواقع ستجدها هنا :
      http://www.ar1web.com/p/background-for-websites.html
      أما إذا كنت ستستعمل خلفية من تصميمك بدون أي إضافة ستأخذ المقاس مثل هذه : http://i.imgur.com/m4UVyU5.jpg
      وعندما ستضيفها للموقع ضع الكود هكذا :
      background: url(هنا رابط الخلفية); background-size: cover; background-attachment: fixed;

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

      حذف
    5. ابحث عن body { وستجد background سيكون أمامها كود اللون غيره بهذا: url(هنا رابط الخلفية)

      حذف
  4. اخي لدي سؤال اريد تصميم خلفية لمدونتي لكن لا اعرف قياسات الصورة ممكن تساعدني وشكرا ^^

    ردحذف
    الردود
    1. غير معرف3/02/2016

      القياس هو 1920x1080 و ستكون رائعة

      حذف
  5. شكرا لك وبالتوفيق

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم