23‏/09‏/2014

أظن أن الصورة تتكلم بدل الموضوع 😎 أليس كذلك؟ نعم إضافة تمكنك من تغيير خلفية موقعك أو مدونتك بخلفيات عديدة تتغير تلقائيا ، الأكواد المستعملة جافاسكريبت/جيكويري وقليل ما نشاهده هذه الإضافة بقوالب بلوجر ليس لها اثر رأيت معضمها في قوالب ووردبريس إلى أني بحثت ووجدت الإضافة على بلوجر وهاهي بين أيديكم وأنصح لمن سيستعملها أن يستعمل خلفيات أو صور بجودة عالية ايضا خلفيات نقية لكي لا تزعج الزائر بالنسبة للمقاس فهو تلقائي
في المعاينتان التاليتان إستخدمت خلفيات بالألوان و خلفيات بالصور
شرح طريقة التركيب
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. ابحث بإستعمال 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 هو عدد تزامن تغيير الخلفية
نقصان في الرقم يعني توقيت سريع لتغيير الخلفية, زيادة في الرقم توقيت بطيئ في تغيير الخلفية
* بإمكانك إضافة خلفيات اخرى بتكرار الكود
مثال :
 "ضع هنا رابط الخلفية",
ملاحظة : قد لا تشتغل الاضافة إذا كنت تتوفر على إضافات تشتغل بالجيكويري
13 Blogger تعليقات
Disqus
13 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

فهمتك بارك الله فيك :lv

المشرف
avatar

مبدع واصل اخي
شكرا

المشرف
avatar

لا يمكنني ايجاد ال <head/>

المشرف
avatar

ضروري أن يكون انسخ الكود كما هو : </head>

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

شكرا لك وبالتوفيق

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة