السلام عليكم ورحمة الله وبركاته
يسر فريق عمل | مدونة بلوجر أن يقدم لكم إضافة سلايد شو بتقنية 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/AVvXsEioVZGPyRFGt5rEBs6tfzsiNAo8g9bJE56wUy5n05jKpbQiQ0rKT1T6lCjF6iOLU416pdC9ZsR8gaojayxOPjyd6qkRqhU8GarkirMJZ6gHmJWnA2T_4dMTvrNSwT7ktrSJfoK5Y73BRkY/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/AVvXsEjoY12GiZ9-4ZAsgVts10_oj-1JHAHnIjwp5C_l91fk_Qpc0EqLo3YERdErA8aTl62s0q0TjSpdQajXEdpp-QojvGoKfTv_fnRh_ceoDU6cELSZH7_WLl1qKC180CtIvI4WBLl2IJRiZC0/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/AVvXsEhRzImnWZQGm5NOBEFoWBRSBX2TctVjhMnOE2JV5ORpZKApCVrEyN1qe0jmk9mNZjloEIf-zUmmYGEbHepPqGOJPi068TTsXUQMuXm3Qf0qCfKkkZmUM9g-GixgSP1ztCh3f6B6b-li_aY/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/AVvXsEgioCTGhwZFs8v65vv6wn9a0ZElUU0qWbXkFPn8s6pIjM__b1_HsXLfvR_mNOLMaIX6ABYay5vOzrff5xbaHi4xSv-XBZaVLqIJVKKxfG04Q9T0HyceuQj3XfG5k7cZ-HO9fTtVCl0-4gs/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/AVvXsEgr3txSLhmR_OOhrZQi8E-eOszX2BNtV_BFwL_i-9YRuN_RgWOShGfbt7XyMKRpUJ-y26iejIwIvPm3BSFPbx6syPDSm4LZ-8PRkHwMltmVwPIoKJ45BL3TrOGVb2msipMYg_2q2po-bsc/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>
- التعديلات :
- عدل ماهو باللون الأحمر ( الصورة والوصف ) .
0 Comments:
إرسال تعليق