آخر الأخبار
recent

إضافة سلايد شو بتقنية CSS لمدونات بلوجر 2015




السلام عليكم ورحمة الله وبركاته 

يسر فريق عمل | مدونة بلوجر أن يقدم لكم إضافة سلايد شو بتقنية CSS  

السلايد شو في قمة الروعة  لعرض مشاركاتك الأخيرة .



  • فريق عمل مدونة هوم بلوجر

  • فريق عمل مدونة هوم بلوجر

  • فريق عمل مدونة هوم بلوجر

  • فريق عمل مدونة هوم بلوجر

  • فريق عمل مدونة هوم بلوجر


- طريقة التركيب :

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه .



 #content-downslider { width:100%; height:265px; margin:10px auto 0; } #downslider { background:#000; border:5px solid #52e052; box-shadow:1px 1px 5px #52e052; height:265px; width:550px; overflow:visible; position:relative; } #mask { overflow:hidden; height:265px; } #downslider ul { margin:0; padding:0; position:relative; } #downslider li { width:550px; height:265px; position:absolute; top:-270px; list-style:none; } #downslider li.firstanimation { -moz-animation:cycle 25s linear infinite;   -webkit-animation:cycle 25s linear infinite;       } #downslider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite;       } #downslider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite;       } #downslider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite;       } #downslider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite;       } #downslider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #downslider .tooltip h1 { color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #downslider li#first:hover .tooltip, #downslider li#second:hover .tooltip, #downslider li#third:hover .tooltip, #downslider li#fourth:hover .tooltip, #downslider li#fifth:hover .tooltip { left:0px; } #downslider:hover li, #downslider:hover .progress-bar { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } .progress-bar { position:relative; top:-5px; width:550px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; }@-moz-keyframes cycle { 0%  { top:0px; } 4%  { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0%  { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0%  { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0%  { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0%  { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0%  { top:0px; } 4%  { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0%  { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0%  { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0%  { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0%  { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   }
4- أذهب إلى تخطيط | أختر إضافة أداة : HTML/JavaScript

5- الصق الكود التالي في صندوق الأداة .

 <div id="content-downslider"> <div id="downslider"> <div id="mask"> <ul> <li class="firstanimation" id="first"> <a href="#"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObkAKcXrBRHHcmy3SMNXWM_n5rfXzsd9pFYvsE7fnrw-dch7JTE_wOfJO7pYw_aoi7wbp8lAv24t38AE94pIuzT9TPOrhqr93VHlZTOTErM6gwyFjff_UifWC1gtNVXN16l3pUhP3SSs/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="secondanimation" id="second"> <a href="#"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkJQYt_NJYp2vVPUv4UgPxjgaBucpb3h2dJom0e6uuBGl4H3fx7zr2dOth00l-2sCH-nNtQ5bz6rEnMNosexApiKGbLdHr0Ctml8jgx97PwWQVn_MXeG1YnMqaSeduASWcg9fmJ7VIv8/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="thirdanimation" id="third"> <a href="#"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fSOS8ehUhWnThZUfffuGZTYJjZEC8PTAQlg8z5zotM7G3BXDOU8vtMCi3Hi4PyzpWnqi2OPVkgAKl3dJnTK3RmKgAlfUAgO-fhqwiC66ftGVSjeBEubnOnCC9MYx8u61bH_vXlBw4Ss/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="fourthanimation" id="fourth"> <a href="#"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvVCT2Ul4d9Q5_U4X5cHjy7svEAMHI7QIcm1QQa08tju4dcmTRYgG-dH_lpbslsnVMCC_ib5jPQEVIzQ1iuv6lIICmzNCafRoB19sFP25QbcQav2BMJe58WCoVuV80Ypo8fbmhQ_q1as/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="fifthanimation" id="fifth"> <a href="#> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTs0cgbIKu6JhJgNuPQmsYevue-V0AywFmMzovKF5KAPDGJF9LWJLy9ew45FlWQRvQBS0X1Dz8yOtdB8hye_bKiK7sDVEHFq_HenAuLccX0SF_YrOGWCIYsLx_gp1Q024yGfQEnJSlZU/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> </ul></div> <div class="progress-bar"></div> </div> </div>


- التعديلات :

- عدل ماهو باللون الأحمر ( الصورة والوصف ) .


Hanna Qardahji

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

الموقع: قوالب بلوجر

إضافة سلايد شو بتقنية CSS لمدونات بلوجر 2015
موضوع المشاركة: إضافة سلايد شو بتقنية CSS لمدونات بلوجر 2015 9 من خلال 10 وعلى أساس 10 تصنيف. 9 تعليقات المستخدمين.

ليست هناك تعليقات:

إرسال تعليق

يتم التشغيل بواسطة Blogger.
مشاركات مختارة × +