طريقة عمل خلفية للمدونة على شكل 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5z9hp1m9tXT2E04TbdpmGAtpjdNlx38Dqynkzltl469Yv2oPxOMYVCjuBIrgS9wjJW5egLCbUn5axcgo4YeJ10QFcxV8Kfp1qd_CH0k1pRbf3zOTBOKy-lqTDUgeTMet2eVpBlJ-7WEG1/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>

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