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

Admin Amer

أبريل 23, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

السلايدر انيق جدا وسلس وطريقة تركيبه سهلة ايضا

اولا يمكنك معاينته من خلال الزر التالي

معاينة

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

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>.box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2} </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. الان في الخطوة الثانية إبحث على

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

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

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='recent-slider' id='recent-slider'><div class='container'><b:section class='box-sec' id='box-sec' showaddelement='yes'> <b:widget id='HTML655' 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>

1. الان اذا اردت تغيير التسمية ما عليك سوى تغيير كلمة سينما بتسمية من تسمياتك

اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد من هنا

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/04/blog-post_23.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/04/blog-post_23.html">سلايد شو احترافي بشكل جديد يعرض المواضيع حسب التسمية كتبها: المدون التقني - الخبير عامر بشير</a>