SAMSUNG S4 REVIEW

طريقة عمل خلفية للمدونة على شكل 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/AVvXsEhm2T3v1U1ltupGMDoN1cMS-ScVOzFq_URJv3Gu6zJCZ7pbcc_HYw7719EXO_GRKkOUluORfg6dRn_R-8i6vRICEdTBcTBGeTyT_gi54KIpHmT60HqWStawZ70yNkuLzdME5j1eg3SJg_SV/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>

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

قائمة مسندلة لوضع الفيديوهات على بلوجر.

مرحبا اليوم سأقدم لكم  إضافة جميلة جدا لمتستعمل من قبل في المدونات العربية وهي إضافة الفديوها في قائمة مسندلة بحيث لا تحجز حيز من مساحة الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة مسندلة واحدة  لا يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك على أي عنوان سيظهر الفيديو المقصود ، الأدات هذه لا تعمل بشكل أتوماتيكي يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة أيضا بيحث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه :D

أقدم لكم صور للأداة :

مثال حي للأداة: إضغط هنا

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

<!--by-Ayoub Etmaiti- slide bar youtube -->     

<script type="text/javascript">

function MostrarVideo(idYouTube)

{

var contenedor = document.getElementById('divInnerVideo');

if(idYouTube == "")

{

contenedor.innerHTML = "";

}

else

{

var dimensiones = "width='420' height='315' frameborder='0'";

var url = "http://www.youtube.com/embed/" + idYouTube;

contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";

}

}

</script>

<div style="margin:20px 0px;">

<select id="sVideos" onchange="MostrarVideo(this.value);">

<option value="" selected="selected">[إختر الفيديو المراد عرضه...]</option>

<option value="lOYBSSP64S4">عنوان الفيديو</option>

<option value="lOYBSSP64S4">-عنوان الفيديو-</option>

</select>

</div>

<div id="divInnerVideo"></div>

<!--by-Ayoub Etmaiti- slide bar youtube -->     

1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة  lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4  ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله