بسم الله الرحمن الرحيم اهلا بكم أعزائى متابعى البروفيور الصغير فى هذه التدوينة الرائعة التى سوف تعجبكم هذه التدوينة جلبت لكم سلايدر غاية فى الروعة والتصميم يجذب مشاهده هذا السلايدر يمكن وضعه اكثر لمدونات الافلام والمسلسلات لكن يمكنكم أيضا وضعه فى مدونتاكم فهيا بنا إلى الشرح
الشرح جدا سهل وهذه الطريقة أسهل طريقة لوضع سلايدر على أى موقع فهيا بنا :
أولا تذهب إلى التخطيط ثم تختار المكان الذى سوف تضع فيه السلايدر ثم أختار
HTML/JavaScript |
ثم أنسخ هذا الكود وضعه وأحفظ الكود :
[code type="هذا الكود فقط على البروفيسور الصغير"]
*/ body{ font-family: Tahoma; font-size: 14px; } /* */ /****************************************** ** Slider th3littleprofessor.com ******************************************/ .YC-master-slider{ width: 100%; height: 487px; position: relative; overflow: hidden; z-index: 32; background-color: #0C0E1E; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .YC-master-slider:before{ content:''; width: 100%; height: 65px; background: rgba(255, 0, 0, 0) url(http://cinemalek.com/series/wp-content/themes/series/img/shadow-2.png) top center no-repeat; background-size: 100% 100%; position: absolute; top: 0px; left: 0px; display: block; z-index: 2; } .yc-video-master-loop:before{ content:''; width: 100%; height: 55px; background: rgba(255, 0, 0, 0) url(http://cinemalek.com/series/wp-content/themes/series/img/shadow-4.png) top center no-repeat; background-size: 80% 100%; position: absolute; top: 0px; left: 0px; opacity: 0.8; display: block; z-index: 2; } .YC-slider{ height: 487px !important; display: block; } .YC-master-slider i{ display:none; } .YC-master-slider .item{ height: 487px; } .item a{ display: block; position: relative; height: 487px; } .item .fu-images{ height: 487px; position: relative; z-index: 1; margin-left: 400px; width: 1080px; } .item .fu-images img{ width: 100%; z-index: 2; } .img_star{ content: ''; width: 292px; height: 312px; position: absolute; border-radius: 50%; right: -290px; top: 90px; background-position: top center !important; background-size: 100% 100% !important; } .fildes-slider:after{ content: ''; width: 433px; height:507px; position: absolute; top:0px; right: -431px; background: url(http://s14.postimg.org/bx0e4sgpt/slider.png) top left no-repeat; } .fildes-slider{ position: absolute; top: 0px; left: 0px; z-index: 2; width: 290px; background: rgba(12, 14, 30, 1); height: 487px; text-align: center; } .YC-img-thumbnail-slider{ width: 433px; height: 487px; position: absolute; top: 0px; z-index: 10; right: 500px; } .YC-img-thumbnail-slider-2{ background: url(./img/slider-2.png) top center no-repeat; width: 433px; height: 487px; position: absolute; z-index: 10; } .YC-img-thumbnail-slider img{ margin-top: 90px; width: 310px; height: 310px; border-radius: 50%; margin-left: 9px; display: block; z-index: 3; } .YC-number-series-slider{ height: 190px; padding-left: 20px; padding-top: 30px; color: white; } .cont-po-slider h1{ padding: 0 30px; color: white; margin-top: 50px; font-size: 30px; } .YC-number-series-slider span{ display: block; font-size: 100px; font-weight: bold; margin-bottom: -25px; } .YC-number-series-slider strong{ display: block; font-size: 30px; text-align: center; margin-top: 30px; color: #309FD9; } .YC-master-slider:hover .next { right: 25px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .YC-master-slider:hover .prev { left: 25px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .YC-master-slider .next { z-index:1; right: -80px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .YC-master-slider .prev { z-index:1; left: -80px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .prev { position:absolute; left:25px; top:185px; width: 55px; height:86px; background: url(http://cinemalek.com/series/wp-content/themes/series/img/YC-prev.png) center center no-repeat; overflow:hidden; text-indent:-9999px; } .next { position:absolute; right:25px; top:185px; width: 55px; height:86px; background: url(http://cinemalek.com/series/wp-content/themes/series/img/YC-next.png) center center no-repeat; overflow:hidden; text-indent:-9999px; } .line_he{ height: 50px; background-color: #309FD9; } .yc-video-master-loop{ background: #057CBB; position: relative; box-shadow: inset 0 6px 8px -6px #000; text-align: center; padding: 20px 1px 50px; min-height: 400px; } .yc-video-master-loop.z1:after{ border-top: 100px solid #0C0E1E; } .yc-video-master-loop:after{ left: 0px; top: 0px; content: " "; z-index: 10; position: absolute; width: 0; height: 0; border-top: 100px solid #101010; border-right: 100px solid rgba(0, 0, 0, 0); } .z1{ z-index:10 } .z2{ z-index:9 } .z3{ z-index:8 } .z4{ z-index:7 } .z5{ z-index:6 } .z6{ z-index:5 } .yc-Soundtrack-master-loop{ position: relative; box-shadow: inset 0 6px 8px -6px #000; padding: 20px 1px 50px; min-height: 400px; } .yc-Soundtrack-master-loop .YC-tome-title-cat{ background: #101010; } .yc-Soundtrack-master-loop .YC-tome-title-cat .span2 { background: #057CBB; } .yc-Soundtrack-master-loop .YC-tome-title-cat div{ background: #101010; border-color: #057CBB; } .yc-Soundtrack-master-loop .YC-tome-title-cat div > span > span { color: #0E95DC; } .yc-Soundtrack-master-loop:before{ left: -43px; top: -62px; content: " "; position: absolute; width: 0; height: 0; z-index: 0; border-bottom: 170px solid rgba(128, 61, 61, 0); border-left: 100px solid transparent; box-shadow: 6px 0 8px -6px #000; transform:rotate(75deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ } .yc-Soundtrack-master-loop:after{ left: 0px; top: 0px; z-index: 25; content: " "; position: absolute; width: 0; height: 0; border-top: 100px solid #057CBB; border-right: 100px solid transparent; } #starfield { opacity:.4; } .slider-home{ padding: 40px 0px 1px; position: relative; overflow: hidden; width: 1200px; margin: 0 auto; } .slider-home .caroufredsel_wrapper { margin: 0 !important; width: 100% !important; } #prev2, #prev3, #prev4, #prev5, #prev6, #prev7, #prev8, #prev9{ width: 53px; height: 105px; position: absolute; left: 15px; z-index: 20; top: 240px; text-indent: -99999px; overflow: hidden; background: url(http://cinemalek.com/series/wp-content/themes/series/img/carousel-arrow-prev.png) left center no-repeat; } #next2, #next3, #next4, #next5, #next6, #next7, #next8, #next9{ width: 53px; height: 105px; position: absolute; right: 15px; z-index: 20; top: 240px; text-indent: -99999px; overflow: hidden; background: url(http://cinemalek.com/series/wp-content/themes/series/img/carousel-arrow-next.png) left center no-repeat; } .YC-tome-title-cat .span1 {} .YC-tome-title-cat .span2 { position: absolute; top: 50%; right: 0; width: 100%; background: #1192D6; height: 3px; z-index: -1; margin-top: -1.5px; } .YC-tome-title-cat:after { content: ''; } .YC-tome-title-cat div > span { transform: skew(-7deg); display: block; } .YC-tome-title-cat div > span > span { color: #0C0E1E; } .YC-tome-title-cat div { display: table; margin: 0 auto; background: #057CBB; padding: 0px 20px; transform: skew(7deg); color: white; border-right: 5px solid #1192D6; border-left: 5px solid #1192D6; } .YC-tome-title-cat { color: black; text-align: center; margin-bottom: 10px; position: relative; z-index: 0; margin-top: 0px; padding: 7px 0px; background: #057CBB; font-size: 22px; font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; } .oh-1{ position: absolute; background: linear-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: webkit-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: moz-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: o-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: ms-gradient(135deg, #309FD9 50%, #0C0E1D 50%); width: 120px; height: 120px; bottom: -1px; right: 0px; z-index: 10; -webkit-box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); } .oh-1.oh2:after{ background: #057CBB; } .oh-1:after{ content:''; background: #0C0E1D; width: 120px; height: 7px; right: 0; position: absolute; bottom: -7px; } .oh-1:before{ content: ''; left: -28px; top: -56px; content: " "; position: absolute; width: 0; height: 0; border-bottom: 170px solid rgba(128, 61, 61, 0); border-left: 100px solid rgba(0, 0, 0, 0); box-shadow: 6px 0 8px -7px #000; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .oh2{ background: linear-gradient(135deg, #1E2244 50%, #057CBB 50%); } .slider-home-mas{ color: #FFF; box-sizing: border-box; position: relative; min-width: 1100px; padding: 10px 0; background-color: rgba(255, 255, 255, 0.19); border-bottom: 5px solid #6E7384; } .slider-home-mas .caroufredsel_wrapper{ width: 100% !important; } .slider-home-mas li{ float: left; margin-right: -5px; } .contentSingle .block_loop{ float: right; width: 250px; height: 270px; } .contentSingle.dd-fe .block_loop{ width: 231px; height: 255px; } .contentSingle .block_loop h1t{ top: auto; bottom:0px; background-color: #004591; } .slider-home-mas li .block_loop:hover h1.title_loop{ bottom: 0px; padding: 20px 10px; -webkit-animation-name: auto; animation-name: auto; } .block_loop{ position: relative; float: left; width: 290px; height: 400px; margin-bottom: 5px; overflow: hidden; margin-left: 10px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5); direction: rtl; text-align: right; border: 5px solid rgba(255, 255, 255, 0.29); border-radius: 3px; background-color: #161617; } .block_loop img{ width: calc( 100% - 25px); height: 100%; } .block_loop a{ display: block; height: 100%; } .block_loop h1.title_loop{ width: 100%; background-color: rgba(24, 23, 22, 0.69); position: absolute; top: -100px; padding: 10px 10px; font-size: 13px; line-height: 30px; font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; min-height: 50px; color: #FDF8F8; text-align: center; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .block_loop:hover h1.title_loop{ top:0px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: zoomInDown; animation-name: zoomInDown; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } .slider_block_one{ float: left; width: 336px; height: 515px; position: relative; overflow: hidden; margin-right: 5px; margin-left: 5px; } .block_loop:hover .dex-sld{ bottom: 0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dex-sld{ position: absolute; bottom: -105px; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dex-sld li{ display: block; text-align: left; float: none; color: #FDFDFD; margin-right: 0px; padding: 8px 78px 6px 36px; font-size: 27px; font-weight: bold; text-shadow: 0 1px 10px #0C0C0C; } .dex-sld ul{ } .block_loop:hover .dex-sld:after{ -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dex-sld:after{ content:''; width:78px; height: 78px; background: url(http://cinemalek.com/series/wp-content/themes/series/img/cam-reel.png) center center no-repeat; position:absolute; display: block; top: -35px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dex-sld li.views{ background-color: rgba(0, 0, 0, 0.67); border-bottom: 2px solid #2F2F2F; font-size: 16px; font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; } .dex-sld li.cat{ background: #1A1F30 url(./img/list.png) 3% center no-repeat; background-image: linear-gradient(to left, #1B1B1B 0%, #212223 30%, #2B2B2B 50%, #222323 70%, #1B1B1B 100%); font-size: 12px; } .dex-sld li.cat a{ color: white; font-size: 15px; font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; } .slider_block_two .dex-sld li.cat a{ font-size: 13px; } .descri-slid{ padding: 9px 11px; font-size: 14px; font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; line-height: 30px; background-image: linear-gradient(to left, #0A0A0A 0%, #0F0F0F 30%, #191919 50%, #101010 80%, #0A0A0A 100%); height: 105px; overflow: hidden; } .slider_block_one .block_loop{ width: 336px; height: 515px; margin-bottom: 0px; } .slider_block_two{ width: 715px; float:left; } .slider-right{ width: 40px; height: 60px; position:absolute; right: 0px; top: 120px; border-radius: 3px 0 0 3px; background: #136FB8 url(./img/slider-home-right.png) center center no-repeat; cursor: pointer; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .slider-right:hover{ width:90px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .slider-left:hover{ width:90px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .slider-left{ width: 40px; height: 60px; position:absolute; left: 0px; top: 120px; border-radius: 0 3px 3px 0; background: #136FB8 url(./img/slider-home-left.png) center center no-repeat; cursor: pointer; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .futc-post{ background: #057CBB; position: relative; box-shadow: inset 0 6px 8px -6px #000; } h2.title-cat{ background: #26A3C2; color: rgba(0, 0, 0, 0.92); float: right; width: 400px; margin-right: 20px; margin-bottom: 30px; margin-top: -20px; line-height: 40px; padding-right: 70px; text-align: right; position:relative; text-transform: capitalize; box-shadow: 0 6px 8px -6px black; border-bottom: 4px solid rgba(255, 255, 255, 0.13); border-top: 4px solid rgba(255, 255, 255, 0.13); font-family: 'DroidKufi bold' , Tahoma; font-weight: bold; font-size: 18px; } h2.title-cat:before{ content:""; position: absolute; width: 0; height: 0; right: 356px; margin-top: -4px; border-top: 52px solid #057CBB; border-right: 44px solid rgba(0, 0, 0, 0); } .futc-post.def_loop:before{ left: 0px; top: 0px; content: " "; z-index: 28; position: absolute; width: 0; height: 0; border-top: 100px solid #0C0E1E; border-right: 100px solid rgba(0, 0, 0, 0); } .futc-post:after{ content:''; position: absolute; background: linear-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: webkit-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: moz-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: o-gradient(135deg, #309FD9 50%, #0C0E1D 50%); background: ms-gradient(135deg, #309FD9 50%, #0C0E1D 50%); width: 120px; height: 120px; bottom: 0px; right : 0px; z-index: 10; -webkit-box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3); }
[/code]
أن لم تفهم أى شئ لا تتردد فى أسئلتنا.
تعليقات
إرسال تعليق