تغيير لون خلفية المدونة الى عدة الوان متحركة Animated Color Changing Background

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

هذه الطريقة تختلف عن التدوينة الذى وضعتها لكم وهى وضع خلفية ثابتة لمدونات بلوجر - خلفية بجوانب المدونة وايضا تختلف عن هذه التدوينة لانها تتمثل فى الصور وليست الالوان : جعل خلفية المدونة تتغير تلقائيا اثناء التصفح BACKGROUND CHANGER AUTOMATICALLY

كيفية تركيب الاضافة الى المدونة :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الان قم بالبحث عن هذا الكود :

]]></b:skin>

اضف قبلة هذا الكود :

body {

animation: colorBackground 22s infinite; 

-webkit-animation: colorBackground 22s infinite; 

-moz-animation: colorBackground 22s infinite; 

-o-animation: colorBackground 22s infinite; 

}

@keyframes colorBackground {

0% { background-color: #B461FB; color: #B461FB; }

20% { background-color: #74E588; color: #74E588; }

40% { background-color: #F98585; color: #F98585; }

60% { background-color: #50BFE1; color: #50BFE1; }

80% { background-color: #4256EF; color: #4256EF; }

100% { background-color: #B461FB; color: #B461FB; }

}

@-webkit-keyframes colorBackground {

0% {background-color: #B461FB; color: #B461FB;}

20% {background-color: #74E588; color: #74E588;}

40% {background-color: #F98585; color: #F98585;}

60% {background-color: #50BFE1; color: #50BFE1;}

80% {background-color: #4256EF; color: #4256EF;}

100% {background-color: #B461FB; color: #B461FB;}

}

@-moz-keyframes colorBackground {

0% {background-color: #B461FB; color: #B461FB;}

20% {background-color: #74E588; color: #74E588;}

40% {background-color: #F98585; color: #F98585;}

60% {background-color: #50BFE1; color: #50BFE1;}

80% {background-color: #4256EF; color: #4256EF;}

100% {background-color: #B461FB; color: #B461FB;}

}

@-o-keyframes colorBackground {

0% {background-color: #B461FB; color: #B461FB;}

20% {background-color: #74E588; color: #74E588;}

40% {background-color: #F98585; color: #F98585;}

60% {background-color: #50BFE1; color: #50BFE1;}

80% {background-color: #4256EF; color: #4256EF;}

100% {background-color: #B461FB; color: #B461FB;}

}

بالاخير اضغط على حفظ وانتهى التركيب 

الان اذهب الى الصفحة الرئيسية للمدونة لتشاهد النتيجة 

ارجو بأن هذه الاضافة تستحق النقل لكم .

مصدر التدوينة من موقع : bloggerspice.com

By glok

Similiar tagsدروس بلوجرمتغيرات القالب