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

 السلام عليكم ورحمة الله ، أهلاً وسهلاً بكم متابعي و زوّار موقع المحترف تك في هذا الدرس و الشرح الجديد الذي سأتطرق فيه لطريقة تركيب سلايد شو احترافي للمدونة. هيّا نبدأ !

طريقة التركيب :

• اذهب الى لوحة التحكم بالمدونة
• إضغط على المظهر 
• إختر تعديل 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5gdcQDtHIm0x10d3WSCup7QK1uXD89urpmxW1VxXtomguZ_pVCK-v2Tltv9COXCu_L7_3iqFjId5LVCG3avADRi_T2R1jAL13EAwOdp0cHcI2796UjwrNlh3NXL-00nfpxQ9THU4FtU/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>

قم بتغيير كلمة "تسمية" بحسب القسم الذي تريد أن يعرضه السلايدر.

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