سلايد شو يعرض المواضيع حسب التسمية الشكل الرابع

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

اضافة اليوم هيا عبارة عن سلايد شو يعرض لك المواضيع حسب التسمية السلايدر

معاينة

نبدا بشرح تركيب السلايدر

1. إبحث على </head> وضع هذا الكود فوقه مباشرة

<script <b:if cond='data:blog.url == data:blog.homepageUrl'><style>.boxx{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Mc2wMJmycbgu7NFUvToX-d3KRA_-_ja6Slc2nNx_q5yg0iiaMZwG-7jGZGj5uUzYhZKc1_HbcJgJ80SDcnsu1O0Agl8VFpCTi_k3Kgnm-c5gZG05yJFBixslkbSbqDEX63cfI-CA1kUS/s1600/bg1.jpg) center no-repeat fixed #000;height:450px;margin-bottom:40px;background-origin:initial;background-clip:initial;background-size:cover;z-index:1}.boxx .section-overlay{position:relative;width:100%;padding:0;margin:0;right:0;top:0;float:right;height:100%;z-index:2}.boxx .bg-opacity-7{background-color:rgba(0,0,0,.6)}.boxx .sec-bpadding-3{padding-bottom:70px}.boxx1{margin:0;z-index:1;padding:30px 0}.recent-boxes{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPd0F2PV5GOROyhYcuOqyB4RFwF-Sso_YxTB95C_aEl0Xf8QY9t_fN7EgoHuLNzxTJ1FcmMqzgVneMq8joLytFcuXDAhkb_AOV3Of_Z5GZ2lPoj-dW0rMtqyb3HUOTRk-PPYxvo1FKQG7/s1600/bg.jpg) fixed #f8f8f8;overflow:hidden;position:relative;margin:0;padding:80px 0 50px;-moz-box-shadow:0 10px 40px -18px #000;-ms-box-shadow:0 10px 40px -18px #000;-o-box-shadow:0 10px 40px -18px #000;-webkit-box-shadow:0 10px 40px -18px #000;box-shadow:0 10px 40px -18px #000}#box-sec,.box-sec{margin:10px}.box-sec h2{display:none}.recent-boxes .carousel{position:relative;margin:0;padding:0;overflow:visible;height:auto;display:block;clear:both}.main-carousel{overflow:hidden}.carousel-item{padding:0!important;position:relative;overflow:hidden;background:#fff;margin-bottom:35px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.carousel-thumb{width:100%;height:250px;position:relative;display:block}.carousel-item .box-image{width:100%;height:100%;position:relative;display:block}.carousel-item .box-image:after{content:no-close-quote;position:absolute;right:0;bottom:0;width:100%;height:171px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WumVEhgR5OLX8oQCtd1JsED77pqMr90eT241-cXjg_1t2dCOjrQmfsAsGNr31oKJBmwslCAfoQ_rHESwL-iiAbr2HC422PII0W-ReToMe3Fbg-dzpSMQe78bKsmM8MgnYPHWtCfARI8/s1600-r/metabg.png) repeat-x;background-size:100% 100%;opacity:.8}.carousel-content{position:relative;bottom:0;width:100%;z-index:2;box-sizing:border-box;padding:20px;text-align:right}.carousel-item .recent-title{margin:10px 0;font-size:18px;font-weight:500}.carousel-item .recent-title a{color:#404040;display:inline-block;font-weight:500;line-height:1.4em;font-size:14px;text-transform:uppercase;padding-bottom:5px}.carousel-item .recent-date{color:#b71c1c;padding:5px;border:1px solid #c62828}.carousel-tag a{display:inline-block;color:#ff3d00;height:20px;line-height:20px;letter-spacing:2px;padding:0;font-size:14px;font-weight:600;text-transform:uppercase}.recent-date{color:#bdbdbd;font-size:14px;font-weight:400}.recent-date:before{color:#b71c1c;content:'\f073';font-family:fontawesome;margin-left:5px}.section_heading1{text-align:center;margin:0 0 60px}.section_heading1 h1{font-size:42px;margin:0}.section_heading1 p{color:#969696;font-size:21px}.main-carousel .owl-next{left:0}.main-carousel .owl-prev{right:0}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;width:40px;height:40px;font-size:25px;line-height:40px;top:43%;color:#fff;background-color:#851414;font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden;position:absolute;text-align:center}.owl-next:hover,.owl-prev:hover{background-color:#c62828;color:#fff}.carousel-tag a{color:#851414} </style><link href='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><script data-cfasync='false' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'/></b:if>

1. الان في الخطوة الثانية إبحث على </body>

<script <b:if cond='data:blog.url == data:blog.homepageUrl'><script type='text/javascript'>//<![CDATA[ /*اعدادات السلايدر*/ var IMAGE_ANIMATE = true; var MONTH_FORMAT=[,"كانون الثاني","فبراير","مارس","أبريل","ماي","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"]; // هنا تغيير اسم الاشهر لو مدونتك اجنبية var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J3UZcYFgKrGGqQ1lzXWqlwa98Q_QC1LZ3Rr5_7SWI9ePtn7BjI4dVOAQFJpQ2VDd3_f_o_5iZhxvlnlM7vrTlkDEHHSvCZCS40ePYrZgRlSPPq5I71o_BM7BXD3qM75Xv5_qOktU_oI/s1600-r/nth.png"; // هنا صورة البديلة var CAROUSEL_NUM = 6; // هنا تتحكم بعدد المواضيع var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = '//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_courses.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); //]]></script></b:if>

1. و اخيرا ضع هذا الكود في المكان الذي تريد انت ضهور فيه السلايدر

<script <b:if cond='data:blog.url == data:blog.homepageUrl'><div class='recent-boxes' id='recent-boxes'><div class='container'><div class='section_heading1'><h1>آخر <span style='color:#b71c1c;'>الدورات</span></h1><p>تحقق من الدورات المميزة لدينا</p></div><b:section class='box-sec' id='box-sec' showaddelement='yes'> <b:widget id='HTML6' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="سينما"></span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2></b:if> <div class='widget-content'> <data:content/> </div><!--b:include name='quickedit'/--></b:includable> </b:widget></b:section></div></div></b:if>

الان احفظ القالب و مبروك عليك الاضافة لا تنسى الاشتراك في المدونة من هنا لكي تدعمني على تقديم المزيد

شارك هذا