سلايد شو النسخة 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: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>

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

برمجة وتصميم 22 مارس 2019 في 4:23 ص

اول تعليق

برمجة وتصميم 22 مارس 2019 في 4:29 ص

أزال أحد مشرفي المدونة هذا التعليق.
- عبدو تكنولوجي - Abdou Technologie 22 مارس 2019 في 4:57 ص
  
  تم اصلاح الكود يمكنك اعادة تركيب الاضافة
  #الخطوة2

Admin 22 مارس 2019 في 6:58 ص

من فضلك قالب لايف فري https://www.abdoutech.com/2019/02/template-live-free-abdoutech.html
رابط الجيمايل الخاص بي : mohammedchouaib2003@gmail.com
- عبدو تكنولوجي - Abdou Technologie 22 مارس 2019 في 9:01 ص
  
  تمت اضافة رابط تحميل من قبل