سلايد شو النسخة 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/AVvXsEjKD9H84MiDK92NSD-ifNgyHnJwGqa0fFK_rKAAvZeXVfT72sqcLdstfxyeI9qGuVWxbRsTAS4ltXI5fwSrQYZAU_TX6ABMrNhugp2xsaQsRPqAkDfSGw3hnDYCbllTqQR-h7kYCGOYaJg/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>

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

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

اول تعليق

رد حذف
برمجة وتصميم
22 مارس 2019 في 12:29 م

أزال أحد مشرفي المدونة هذا التعليق.

حذف
- عبدو تكنولوجي
  22 مارس 2019 في 12:57 م
  
  تم اصلاح الكود يمكنك اعادة تركيب الاضافة
  #الخطوة2
  
  رد حذف
Admin
22 مارس 2019 في 2:58 م

من فضلك قالب لايف فري https://www.abdoutech.com/2019/02/template-live-free-abdoutech.html
رابط الجيمايل الخاص بي : mohammedchouaib2003@gmail.com

رد حذف
- عبدو تكنولوجي
  22 مارس 2019 في 5:01 م
  
  تمت اضافة رابط تحميل من قبل
  
  رد حذف
برمجة وتصميم
26 مارس 2019 في 10:25 م

سامحني اخي عبدو ارجوك سامحني

رد حذف
- عبدو تكنولوجي
  27 مارس 2019 في 1:05 م
  
  <3
  
  رد حذف
برمجة وتصميم
26 مارس 2019 في 10:25 م

إضافة رائعة شكراً لك

رد حذف
ahmed
23 أبريل 2019 في 12:29 ص

الاضافة لا تظهر اخي الكريم ما الحل من فضلك

رد حذف

Forms

عبدو تكنولوجي

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

قد تُعجبك هذه المشاركات

تعليقات