تغيير خلفية المدونة إلى خلفية قمرية متحركة css3


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

الان للشرح:

معاينة الاضافة

  • أدخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة 
  • ثم أنسخ هذا الكود فوقها

[code type="هذا الكود حصرى على البروفيسور الصغير"]body{position:relative}#e_background{background:#022436 url(http://s18.postimg.org/5d4edtc7d/star.png) repeat 20% 20%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:-100;-webkit-animation:stars-anim 600s infinite linear;-moz-animation:stars-anim 600s infinite linear;-o-animation:stars-anim 600s infinite linear;animation:stars-anim 600s infinite linear}
#e_smallstars{background:url(http://s18.postimg.org/5d4edtc7d/star.png) repeat 20% 20%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:1;z-index:-50;-webkit-animation:light 4s infinite alternate;-moz-animation:light 4s infinite alternate;-o-animation:light 4s infinite alternate;animation:light 4s infinite alternate}#e_moon
{background:url(http://s2.postimg.org/w7hxqkrux/moon.png) no-repeat 35% 35%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:1;z-index:-25;-webkit-animation:moon-anim 100s infinite linear;-moz-animation:moon-anim 100s infinite linear;-o-animation:moon-anim 100s infinite linear;animation:moon-anim 100s infinite linear}@media only screen and (max-width:480px){#e_moon{background:url(../img/e_moon2_sm.png) no-repeat 35% 35%}}@media only screen and (min-width:481px) and (max-width:767px){#e_moon{background:url(../img/e_moon2_md.png) no-repeat 35% 35%}}@-webkit-keyframes moon-anim{from{background-position:0 2%}to{background-position:110% 2%}}@-moz-keyframes moon-anim{from{background-position:0 2%}to{background-position:110% 2%}}@-o-keyframes moon-anim{from{background-position:0 2%}to{background-position:110% 2%}}@keyframes moon-anim{from{background-position:0 2%}to{background-position:110% 2%}}@-webkit-keyframes stars-anim{from{background-position:5% 600%}to{background-position:1300% 5%}}@-moz-keyframes stars-anim{from{background-position:5% 600%}to{background-position:1300% 5%}}@-o-keyframes stars-anim{from{background-position:5% 600%}to{background-position:1300% 5%}}@keyframes stars-anim{from{background-position:5% 600%}to{background-position:1300% 5%}}@-webkit-keyframes light{0%{opacity:.1}25%{opacity:.35}50%{opacity:.95}100%{opacity:.2}}@-moz-keyframes light{0%{opacity:.1}25%{opacity:.35}50%{opacity:.95}100%{opacity:.2}}@-o-keyframes light{0%{opacity:.1}25%{opacity:.35}50%{opacity:.95}100%{opacity:.2}}@keyframes light{0%{opacity:.1}25%{opacity:.35}50%{opacity:.95}100%{opacity:.2}}[/code]

ثم أبحث عن هذا الوسم
وأنسخ هذا الكود أسفله



[code type="هذا الكود حصرى فقط على البروفيسور الصغير"]
[/code]


ثم أحفظ القالب وتمتع بهذه الخلفية الرائعة.



أن لم تفهم أى خطوة أكتب تعليقا.

تعليقات