منتديات قلب مسلم
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي



 
الرئيسيةالبوابه جديد*التسجيلدخول

شاطر | 
 

 تعلم كيف تصنع خلفيه احترافيه لمدونتك

اذهب الى الأسفل 
كاتب الموضوعرسالة
عمده المصريين
نائب الاداره
نائب الاداره
avatar

عدد الرسائل : 425
العمر : 47
اعلام الدول :
  :
مزاجك اليوم : روش
الهويه :
مدي احترامك لقوانين المنتدي :
المهنه :
السٌّمعَة : 1
تاريخ التسجيل : 18/10/2008

مُساهمةموضوع: تعلم كيف تصنع خلفيه احترافيه لمدونتك   الأربعاء ديسمبر 04, 2013 3:55 pm





أولا ندخل على تحرير html توسيع القالب ثم نبحث عن :   Outer-Wrapper

ونضيف بعده هذه العبارة : opacity:0.9;

ثانيا نبحث عن :
اقتباس :
]]></b:skin>
ونضيف فوقه كود الcss التالي :


اقتباس :
/* CBSlide-BY-Ayoub.Etmaiti
----------------------------------------------- */
.CBS-Ayoub-Etmaiti,
.CBS-Ayoub-Etmaiti:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.CBS-Ayoub-Etmaiti:after {
content: '';
background: transparent url(http://1.bp.blogspot.com/-oIUwg-kYYww/TwHcFJNdpbI/AAAAAAAASUM/Xajrx6UuZ4A/s1600/pattern.png) repeat top left;
}
.CBS-Ayoub-Etmaiti li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.CBS-Ayoub-Etmaiti li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.CBS-Ayoub-Etmaiti li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.Cool;
}
.CBS-Ayoub-Etmaiti li:nth-child(1) span { background-image: url(https://lh5.googleusercontent.com/-umn39TSVmKs/TpNVbgZ7MkI/AAAAAAAAAjs/4xH5GaiBMDs/s903/SANY0048.JPG) }
.CBS-Ayoub-Etmaiti li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.CBS-Ayoub-Etmaiti li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.CBS-Ayoub-Etmaiti li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.CBS-Ayoub-Etmaiti li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.CBS-Ayoub-Etmaiti li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.CBS-Ayoub-Etmaiti li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.CBS-Ayoub-Etmaiti li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.CBS-Ayoub-Etmaiti li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.CBS-Ayoub-Etmaiti li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.CBS-Ayoub-Etmaiti li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
   opacity: 0;
   -webkit-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -webkit-transform: scale(1.05);
   -webkit-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -webkit-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
   opacity: 0;
   -moz-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -moz-transform: scale(1.05);
   -moz-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -moz-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
   opacity: 0;
   -o-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -o-transform: scale(1.05);
   -o-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -o-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
   opacity: 0;
   -ms-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -ms-transform: scale(1.05);
   -ms-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -ms-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
   opacity: 0;
   animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   transform: scale(1.05);
   animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
   opacity: 0;
   -webkit-transform: translateX(200px);
}
8% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
17% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
19% {
   opacity: 0;
   -webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
   opacity: 0;
   -moz-transform: translateX(200px);
}
8% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
17% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
19% {
   opacity: 0;
   -moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
   opacity: 0;
   -o-transform: translateX(200px);
}
8% {
   opacity: 1;
   -o-transform: translateX(0px);
}
17% {
   opacity: 1;
   -o-transform: translateX(0px);
}
19% {
   opacity: 0;
   -o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
   opacity: 0;
   -ms-transform: translateX(200px);
}
8% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
17% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
19% {
   opacity: 0;
   -ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
   opacity: 0;
   transform: translateX(200px);
}
8% {
   opacity: 1;
   transform: translateX(0px);
}
17% {
   opacity: 1;
   transform: translateX(0px);
}
19% {
   opacity: 0;
   transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .CBS-Ayoub-Etmaiti li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.CBS-Ayoub-Etmaiti li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.CBS-Ayoub-Etmaiti li div h3 { font-size: 50px }
}
وثالثا وأخيرا نضيف الكود التالي بعد <body>


اقتباس :
<ul class='cb-slideshow'>
          <li><span>Image 01</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 02</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 03</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 04</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 05</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 06</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
      </ul>
وهذا هو كل شئ ولتنسوا المعاينة قبل حفظ القالب

_________________
من موقعنا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://akoad.gid3an.com/
 
تعلم كيف تصنع خلفيه احترافيه لمدونتك
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات قلب مسلم :: المنتدي الخدمي :: منتدي تعلم المواقع والمنتديات :: مدونه بلوجر-
انتقل الى: