طريقة عمل خلفية للمدونة على شكل Slidshow

عدد مشاهدات الموضوع:
مرحبا سوف أقدم  لكم شئ جديد اليوم وهو طريقة وضع سلايد شو في خلفية المدونة و إلكم الشرح بالفيديو :





وهنا أقدم لكم شرح مكتوب :

أولا ندخل على تحرير 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.8);
}
.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 {
background-image: url(https://lh3.googleusercontent.com/-pg71qoEK8L4/TpNVxNFXG6I/AAAAAAAAAjw/8iu8IK6Uc3g/s903/SANY0050.JPG);
-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 {
background-image: url(https://lh5.googleusercontent.com/-AaZ8gHb6azQ/TpNXOBMRJII/AAAAAAAAAkI/wzm9Mve5BDY/s903/SANY0059.JPG);
-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 {
background-image: url(https://lh5.googleusercontent.com/-SgrYJrjxal8/TpNXqx3i5WI/AAAAAAAAAkQ/HjmiV0CB0xQ/s903/SANY0061.JPG);
-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 {
background-image: url(https://lh5.googleusercontent.com/-aagk-eWQIUE/TpNX_xJmGXI/AAAAAAAAAkU/PE3wickISzk/s903/SANY0063.JPG);
-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 {
background-image: url(https://lh4.googleusercontent.com/-KCFmHUUD1K4/TpNZDRJTP_I/AAAAAAAAAko/sjyOU0ahBfA/s903/SANY0069.JPG);
-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>


وهذا هو كل شئ ولتنسوا المعاينة قبل حفظ القالب ;)

هناك 47 تعليقًا:

  1. ما شاءالله مجهود رائع.. موفق ثإذنه تعالى

    ردحذف
  2. شكرا على شرح :-t
    http://tatarxwar.blogspot.com/

    ردحذف
  3. السلام عليكم اخي ابو اياد ممكن مساعدة لو سمحت

    ردحذف
  4. أزال المؤلف هذا التعليق.

    ردحذف
  5. @لترتقي الليث
    السلام عليكم اخي ابو اياد احتاج مساعدتك ضروري المرجو الرد علي بسرعة لأن الأمر هام هل تستطيع ام لا

    ردحذف
  6. @لترتقي الليث
    ما المشكلة أخي الكريم

    ردحذف
  7. أزال المؤلف هذا التعليق.

    ردحذف
  8. @لترتقي الليث
    راح أعطيك إيميلي وأريدك أن تدخل على مدونتي وتطبق لي هذه الإضافة لأني حاولت والله أكثر من مرة ولم استطع تطبيقها
    قائمة إدارة المدونة لمنصة بلوجر الجديدة
    الرابط التالي http://www.abu-iyad.com/2012/08/blog-post_9.html
    بأرسلها لك على اتصل بنا فإذا كنت موافق المرجو الرد علي بنعم او لا

    ردحذف
  9. @لترتقي الليث
    اضفني عندك كمؤلف ثم ك أدمين وهذا إميلي
    camelion20051@hotmail.com

    ردحذف
  10. أزال المؤلف هذا التعليق.

    ردحذف
  11. أزال المؤلف هذا التعليق.

    ردحذف
  12. @لترتقي الليث
    لقد ارسلت لك دعوة مؤلف المرجو قبولها الآن

    ردحذف
  13. @لترتقي الليث
    لقد اضفتك admin الرجاء تطبيق الإضافة مع اخفائها عن الأعضاء وإظهارها للإدارة فقط

    ردحذف
  14. @لترتقي الليث
    السلام عليكم ابو اياد قمت بحذف حسابي من مدونتي بالخطأ المرجو ارسال دعوة لي على ايميلي ltr-tqe@hotmail.com
    الآن وشكرا لك على جهودك

    ردحذف
  15. @لترتقي الليث
    السلام عليكم ابو اياد لمرجو حولني من مؤلف الى ادمين وشكرا لك

    ردحذف
  16. @لترتقي الليث
    شكرا لك اخي بو اياد ونتشرف بأن تكن احد المشؤفين المسؤولين على صحيفة لترتقي الليث الإكترونية يعطيك العافية ومع السلامة

    ردحذف
  17. شكرا
    http://ps-tek.blogspot.com/

    ردحذف
  18. Thanx
    http://arabi-b.blogspot.com/

    ردحذف
  19. شكرآ اخوي دايمن مبداع

    ردحذف
  20. جميل جميل جميل جدا جدا جدا
    الله يعطيك العافية وتسلم ايديك
    مجهود رائع
    فعلا انك معلم
    ممكن تساعدني في كيفية عمل صفحات مشاهدة (معاينة demo )لموقعي
    ولك جزيل الشكر
    maghlasawy@yahoo.com

    ردحذف
  21. جزاك الله خير
    http://www.alsadiqa.com
    مشكورر
    http://www.un4web.com

    ردحذف
  22. موقع سامي و قيم بصراحة اول مدونة اتابعها
    Mazian

    ردحذف
  23. أخي لم اجد تلك الكلمه / Outer-Wrapper في تحرير هوتميل ؟

    ردحذف
  24. http://www.arabie3lan.com الشيخ الروحاني

    ردحذف
  25. http://www.arabie3lan.com الشيخ الروحاني

    ردحذف
  26. سؤال واحد بس
    ليه حضرتك مش حاطط إعلانات أدسنس على مدونتك ؟
    للتواصل إتفضلى إيميلى
    mohamedfayez_1987@yahoo.com
    ياهو وفيس

    ردحذف

  27. جزاكم الله خيرا
    حائط لعرض ومشاركة الصور مدير موقع

    ردحذف
  28. عملت المدونة الجديدة ولم اجد مكان لبد او لاضافة المواضيع كيف الحل

    ردحذف

  29. جزاكم الله خيرا
    عرب كول مدير موقع

    ردحذف
  30. ممتاز



    http://prokr.com/furniture-moving-company-jeddah/
    http://shoala.net/

    ردحذف
  31. ممتاز
    http://jeddahrealestate.prokr.com/
    http://jeddahrealestate.prokr.com/apartments-for-rent/
    http://jeddahrealestate.prokr.com/apartments-for-sale/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية