سلايد شو النسخة 11 يعرض اخر المواضيع لمدونات بلوجر

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

 شرح اليوم على سلايد شو يعرض اخر المواضيع على المدونة بطريقة رائعة ومميزة

يمكنك معاينة الاضافة من هنا


نبدا شرح التركيب على بركة الله

• ابحث في القالب على </head> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'><style type="text/css">/*<![CDATA[*/ /* slider Posts */ .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;/* position relative and z-index fix webkit rendering fonts issue */ position:relative;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden;/* fix firefox animation glitch */} .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;/* fix for flashing background */ -webkit-transform:translate3d(0px,0px,0px)} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled{display:none} .owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot{cursor:pointer;cursor:hand;-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{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} /* No Js */ .no-js .owl-carousel{display:block} .owl-carousel .animated{animation-duration:1000ms;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .owl-height{transition:height 500ms ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity 400ms ease} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url("owl.video.play.png") no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform 100ms ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity 400ms ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .slider-featured{background-color:#c2c9d0;clear:both;width:100%;height:270px;position:relative} .slider-featured:after{content:" ";display:block;clear:both} .owl-loaded .featured-posts{display:block!important} .slider-featured .featured-posts{list-style:none;position:relative;height:270px;display:none} .slider-featured-grid .featured-posts{position:relative;height:200px;width:25%;display:block;float:left} .slider-featured-grid .featured-posts .featured-content{bottom:10px;top:inherit;text-align:left;left:14px} .slider-featured-grid .featured-posts:first-child{height:400px;width:50%} .slider-featured-grid .featured-posts .featured-title{font-size:15px;margin-top:6px} .featured-content .post-time,.featured-content .post-time i{color:rgba(255,255,255,0.4)} .featured-post{background-repeat:no-repeat;background-size:cover;background-position:25% 50%;position:absolute;top:0;left:0;height:100%;bottom:0;right:0} .featured-posts:hover .featured-post:after{background-color:rgba(36,36,40,0)} .featured-post:after{content:' ';position:absolute;background-color:rgba(36,36,40,0.5);transition:all .2s ease;top:0;left:0;bottom:0;right:0;z-index:2} .featured-posts .featured-content{position:absolute;top:90px;right:0;left:0;text-align:center;padding:8px 6px;color:#a5a4a4;background-color:rgba(0,0,0,0);z-index:4} .featured-ft{display:block;margin:8px 0;position:absolute;z-index:2;top:10px;right:20px} .featured-posts .featured-title{font-size:24px;line-height:1.4em;text-transform:uppercase;display:block;font-weight:300;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff} .featured-content span,.featured-content i{font-size:12px;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff} span.featured-format-tags{padding:4px;background:-webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%);text-align:center;background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93',endColorstr='#f84272',GradientType=1 )} .featured-content .post-time{float:none} .slider-featured .owl-stage .post-time{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)} .slider-featured .owl-stage .active .post-time{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:800ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)} .slider-featured .owl-stage .featured-title{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)} .slider-featured .owl-stage .active .featured-title{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:400ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)} .slider-featured .owl-dots{position:absolute;right:10px;width:34px;border-radius:100px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);text-align:center;bottom:10px} .slider-featured .owl-dots .owl-dot{display:block;width:8px;height:8px;background-color:#efefef;box-shadow:inset 0 0 0 8px #efefef;margin:4px auto;border-radius:50%;-webkit-transition:-webkit-transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-moz-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-o-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;cursor:pointer} .slider-featured .owl-dots .active{background-color:#fff;box-shadow:inset 0 0 0 2px #2B0C93;-webkit-box-shadow:inset 0 0 0 2px #2B0C93;width:12px;height:12px} .slider-featured .owl-nav{position:absolute;top:10px;color:#a8b6c0;width:34px;border-radius:100px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);text-align:center;right:10px;opacity:0;transition:all .2s ease} .slider-images .owl-nav{bottom:-20px;top:inherit;left:50%;right:inherit;opacity:1;width:80px;height:32px;display:block;padding:0;margin-left:-40px} .slider-images .owl-nav .owl-prev,.slider-images .owl-nav .owl-next{display:inline-block;height:32px;line-height:32px;padding:0 15px} .slider-images{margin-bottom:20px} .slider-featured:hover .owl-nav{opacity:1} .slider-featured .owl-prev:hover,.slider-featured .owl-next:hover{color:#2B0C93;cursor:pointer} /*]]>*/ </style></b:if>

• ابحث في القالب على </body> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'> <script defer='defer' src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[ var month_format = [, "يناير", "فبراير", "مايو", "أبريل", "مارس", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"]; var noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeKdKnlLEHsijPqOGpcUbAfKx03OeJg1TUqpB3CSxJ-BBL3uSYcB8gpOKf3xDDPm6IjrIe0zKzz_Ug_FF6yFu4ZnDRHmrY2d3xDLbveou7-JdRI5vSF6raEncGMfss9blpMOA-DcY_P4/s1600-r/nth.png"; var numitem = randomnum(1,3);// (1,3) رقم عشوائي من واحد الى ثلاث var numitemmob = 2; function randomnum(r,a){for(var n=1;n<=5;n++){var o=a-r+1;return Math.floor(Math.random()*o)+r}} !function(){var e=document.createElement("script") e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider-11.js" var t=document.getElementsByTagName("script")[0] t.parentNode.insertBefore(e,t)}(); //]]></script></b:if>

• الان لاضهار السلايد شو ضع الكود التالي في المكان الذي تريده

<b:tag cond='data:view.isHomepage' name="div" class="featuredabdou" data-num="15"></b:tag>

• الذي ب اللون الاحمر هوا عدد المواضيع التي تريد ضهورها على سلايدر
• اذا اردت اضافة تخصيص للمواضيع ليضهر مواضيع قسم محدد اضف هذا الكود بدلا من الاول

<b:tag cond='data:view.isHomepage' name="div" class="featuredabdou" data-label="هنا تسمية" data-num="15"></b:tag>

الان احفظ القالب مبروك عليك الاضافة

شارك الموضوع عبر :



free-blogger