السبت، 20 أبريل 2013

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

السبت, أبريل 20, 2013  Unknown  لاتوجد تعليقات




 



اولا اعجبني هدا الدرس فارته لمتتبعي المهووسين المغاربة وهو موضوع منقول من مدونة ابو اياد للإفادة

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

أولا ندخل على تحرير 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/AVvXsEhEBT0TTYs08CSeqkHuOPJUi9o8BYXfbRpvJd2Md2RxacnJM05Lvke0Pa9_NUx6KpBuJ0hvxaG-Pc3qxUw-jban78yvyMBLgG3_KSEyVc1kpKQ2qCsqT8yKKwCqMBAUFkzuY-a7FmF48I37/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>

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

إقرأ المزيـــد

حل مشكلة خطأ فتح صفحة تحريرHtml لمنصة بلوجر الجديدة

السبت, أبريل 20, 2013  Unknown  لاتوجد تعليقات



السلام عليكم ورحمة الله تعالى وبركاته ،مرحبا بكل متتبعي مدونة المهووسين المغاربة ،اليوم سوف أقدم لكم حل حصري لمشكلة عدم فتح صفحة "تحرير Html للمدونة " من إكتشافي بعد محاولات عديدة لحل هذه المشكلة

تتمثل هذه المشكلة في أن هناك كود جافا سكريبت يقوم بحذف خاصية Ifram  ولذلك يجب حذفها ،لقد سبق لي شرح هذه الخطوة في أحد التدوينات بعنوان "حل مشكلة ظهور الصفحة السوداء عند تحرير Html لمنصة بلوجر الجديدة" وهي نفس المشكلة الحاصلة الآن حيث يتعذر عليك الدخول لصفحة القالب للتحرير Html ،لكن الطريقة السابقة تلزم عليك أن تقوم بإستعمالالمنصة القديمة للبلوجر ،وهو الشئ الذي لا يمكن عمله الآن بعد حذف هذه المنصة ،لكنني بعون الله تعالى تمكنت من إجاد وسيلة سحرية إن صح التعبير للدخول لصفحة تحريرHtml للمنصة الجديدة ومن تم إمكانية حذف كودIfram  المسبب للمشكلة كما تم شرح الطريقة في التدوينة التي تم ذكرها .

الآن لنتوجه لتطبيق الطريقة ،(تعتمد هذه الطريقة أولا على السرعة في عميلة النقر بمؤشر الماوس)

1.توجه على حسابك بموقع بلوجر
2.توجه للمدونة المراد فتح القالب الخاص بها وذلك من خلال الزر "قالب"
3.قبل فتح صفحة القالب بثواني قم بالضغط على الزر "نسخ إحتياطي/إستعادة" بأقصي سرعة ممكنة ثم إختيار "تنزيل النموذج الكامل" وذلك بعدة نقرات لفتحها بسرعة قبل إكتمال فتح صفحة القالب .(من الممكن أن لا تنجح من المحاولة الأولى ،لكن حاول أن تكون سريعا في عملية النقر على الزرين "نسخ إحتياطي/إستعادة" و "تنزيل النموذج الكامل")
4.سوف يتم تحميل نسخة القالب ،وهذا لا يهمنا الآن ،قم بإغلاق النافذة ثم إضغط على زر "تحرير Html" ثم "متابعة" ،وسوف تلاحظ أنك قد تمكنت من فتح تحرير Html الخاصة بقالب مدونته
5.الآن  قم بحذف كود الجافا سكريبت المسبب لهذه المشكلة وذلك بالبحث عن هذا الكود وحذفه :

<script language='javascript' type='text/javascript'>
if (top != self) {
top.location.href = location.href;
}
</script>




وأخيرا مبروك عليك تصليح قالب المدونة

منقول من موقع الاخ ابو اياد

URL
HTML
BBCode

إقرأ المزيـــد
Twitter Delicious Facebook Digg Stumbleupon Favorites More