جميع المعلومات والصور الواردة في هذا الموقع قد تم نشرها بحسن نية ولأغراض المعلومات العامة ، وجميع حقوقها محفوظة لأصحابها الأصليين. تواصل معنا للإبلاغ عن شكوى

جدول المحتويات

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

تركيب سلايد شو احترافي بلوجر سلايد شو احترافي لعرض اخر المواضيع لمدونات بلوجر إضافة افضل سلايد شو احترافي لمدونة بلوجر سلايد شو احترافي بشكل جديد يعرض المواضيع حسب التسمية شرح تركيب سلايد شو احترافي لمدونات بلوجر تركيب سلايد شو إحترافي لمدونات بلوجر سلايد شو احترافي سهل التركيب سلايد شو بسيط وتلقائي واحترافي افضل سلايد شو بلوجر سلايد شو بلوجر 2018 كود سلايد شو html سلايد شو جاهز سلايد شو احترافي 2017 سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا كيفية تشغيل سلايد شو لمدونات بلوجر بإحترافية سلايد شو بلوجر 2019
السلام عليكم ورحمة الله ، أهلاً وسهلاً بكم متابعي و زوّار موقع المحترف تك في هذا الدرس و الشرح الجديد الذي سأتطرق فيه لطريقة تركيب سلايد شو احترافي للمدونة. هيّا نبدأ !
طريقة التركيب :

  • اذهب الى لوحة التحكم بالمدونة
  • إضغط على المظهر 
  • إختر تعديل HTML
  • استخدم CTRL + F للبحث عن الوسم <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:3px 18px;background:linear-gradient(45deg,#d24949,#9e44c9);border-radius:9px;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://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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-label="تسمية" data-num="15"></b:tag>
قم بتغيير كلمة "تسمية" بحسب القسم الذي تريد أن يعرضه السلايدر.

الى هنا يكون قد انتهى الشرح ، أرجو أن تكونوا قد استفدتم و وفقتم في تطبق الشرح دون مشاكل أو صعوبات. اذا واجهتك اية مشكلة فلا تتردد بطرحها في التعليقات لنساعدك في حلها ، في أمآن الله .

4 تعليقات

  1. thanks
    1. You are welcome!
  2. نرجو منك ان تضع فيديوهاتك تكون افضل للشرح
    1. إن شاء الله أخي/أختي.