إضافة تغيير خلفية قالب مدونتك تلقائياً

السلام عليكم ....  , هل الجميع شاهد قالب نسيم الذي نشرناة سابقا , والذي نال إعجاب الكثيير جدا من زوارنا الاوفياء , والذي نال اعجابهم أكثر هوه تغيير خلفية القالب تلقائياً  , أليوم أوفر لكم هذه الاضافة حتي تستطيعون أضافتها بكل سهولة في مدوناتكم ومواقعكم .

شرح طريقة التركيب

1. توجه لقالب >> تحرير 
2. ابحث بإستعمال Ctrl+F عن <head/>  ضع الكود التالي فوقه

الكود

<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://www.pro7web.com/
*/
;(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>

التغييرات الأساسية
1. ضع رابط الخلفية بدل الكتابة المحددة بالأصفر
2. الرقم الأخير في الكود المحدد باللون الأزرق 3000 هو عدد تزامن تغيير الخلفية
> نقصان في الرقم يعني توقيت سريع لتغيير الخلفية, زيادة في الرقم توقيت بطيئ في تغيير الخلفية
3. بإمكانك إضافة خلفيات اخرى بتكرار الكود

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

شارك المقال على :

فيس بوك

تويتر

جوجل بلس

لينكد إن

Karim Mahran‏

كريم مهران , من مصر , مصمم ومطور مواقع , متخصص تحديداً في منصة بلوجر , شغوفٌ بالتدوين , أنشات هذه المدونة لأقدّم لك مُنتجــاً حصرياً أحرص أن يكــون مُفيــداً وشيّقــاً مُختلفاً لك ,محب لإفادة الأخرين بما أملك , أطمح من خلال مقالاتي على هذة المدونة أن تساعِدك على تحقيق أهدافِك و تسهيل حياتك لتُصبح أكثر عطاءاً و إنتاجيّة.

المزيد عني

السابق التالي

مواضيع ذات صلة :