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

Admin Amer

مارس 22, 2019

0 تعليقات

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

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

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

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

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


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

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

<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>

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

<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/AVvXsEjR4c5fbuZRWTujSbrxR6iVHXs0WjTL4SMk0jUyGfBPBfZbQaUPWtObldh8ZJRPHD0cVrqwya6odbtdCmcxxsBNXB0nYa_HEilOqXSmDw87__vrmNiSzoRH8zexTm90CWNsDaBTDVL0hrc/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>

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

15">

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

هنا تسمية" data-num="15">

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

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

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2019/03/11.html

HTML Code Of Post:

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