السلايدر من أهم الإضافات التى تجعل من موقع أو مدونتك أكثر مجاليه وأكثر أنقه ، وبالتأكيد الكثير من المواقع حاليا يستخدمون سلايدر، واليوم بأذن الله سوف أقدم لكم إضافة حصريه لـ عالم المدون وهى لإضافة سلايدر صور داخل المواضيع فى بلوجر.
أبدا لم أشاهد شخص يقوم بتقديم موضوع مثل هذا ولان على عالم المدون تجد فقط الإضافات الحصرية ، سوف يكون موضوع اليوم حصري ايضا الإضافة هذه تمكنك من جعل الصور داخل مدونتك تظهر بشكل سلايدر بشكل احترافي وانيق يمكنك معاينة الإضافة من الرابط فى الأسفل.
أبدا لم أشاهد شخص يقوم بتقديم موضوع مثل هذا ولان على عالم المدون تجد فقط الإضافات الحصرية ، سوف يكون موضوع اليوم حصري ايضا الإضافة هذه تمكنك من جعل الصور داخل مدونتك تظهر بشكل سلايدر بشكل احترافي وانيق يمكنك معاينة الإضافة من الرابط فى الأسفل.
 |
| حصريا طريقة إضافة سلايدر صور داخل المواضيع لمدونات بلوجر |
معاينة من الإضافة
صورة من الإضافة
 |
| حصريا طريقة إضافة سلايدر صور داخل المواضيع لمدونات بلوجر |
طريقة إضافة سلايدر صور داخل المواضيع لمدونات بلوجر
تركيب الإضافة سهل جدا أولا سوف تبحث عن هذا الوسم]]></b:skin>وتقوم بوضع الكود التالى فوقه#Slider-wdbloog .owl-prev, #Slider-wdbloog .owl-next {
position: absolute;
top: 50%;
color: #fff;
width: 30px;
line-height: 50px;
height: 50px;
background-color: #EE524F;
text-align: center;
}
#Slider-wdbloog .owl-next {
left: 0;
}
#Slider-wdbloog .owl-dots {
text-align: center;
}
#Slider-wdbloog .owl-dot {
width: 15px;
height: 15px;
display: inline-block;
background-color: #A1A1A1;
margin: 10px 5px;
border-radius: 50px;
}
#Slider-wdbloog .owl-dot.active {
background-color: #EE524F;
}الأن سوف تبحث عن هذه الوسم</body>وتقوم بوضع الكود التالى فوقه.
<script type='text/javascript'>
//<![CDATA[
var _0xb0bf=["\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x61\x20\x66\x61\x2D\x61\x72\x72\x6F\x77\x2D\x63\x69\x72\x63\x6C\x65\x2D\x72\x69\x67\x68\x74\x22\x3E","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x61\x20\x66\x61\x2D\x61\x72\x72\x6F\x77\x2D\x63\x69\x72\x63\x6C\x65\x2D\x6C\x65\x66\x74\x22\x2F\x3E","\x6F\x77\x6C\x43\x61\x72\x6F\x75\x73\x65\x6C","\x23\x53\x6C\x69\x64\x65\x72\x2D\x77\x64\x62\x6C\x6F\x6F\x67"];var _0x3c49=[_0xb0bf[0],_0xb0bf[1],_0xb0bf[2],_0xb0bf[3]];var _0xc6b1=[_0x3c49[0],_0x3c49[1],_0x3c49[2],_0x3c49[3]];var _0x566f=[_0xc6b1[0],_0xc6b1[1],_0xc6b1[2],_0xc6b1[3]];var _0x323a=[_0x566f[0],_0x566f[1],_0x566f[2],_0x566f[3]];$(_0x323a[3])[_0x323a[2]]({rtl:!0,loop:!0,margin:10,nav:!0,navText:[_0x323a[0],_0x323a[1]],lazyLoad:!0,autoplay:!0,autoplayTimeout:3e3,autoplayHoverPause:!0,responsive:{0:{items:1},600:{items:1},1e3:{items:1}}})
//]]>
</script>الأن ايضا فوق نفس هذا الوسم</body>سوف تضع الكود التالى.
<script src='https://cdn.rawgit.com/Abdo-Hegazi/wdbloog/master/owl-carousel.js' type='text/javascript'/>يجب أن يكون هذا الكود أسفل الكود السابق ، بمعنى اخر عليك وضع هذا الكود أسفل الكود الثانى فى هذا الموضوع.
الأن أبحث عن هذا الوسم]]></b:skin>وقم وضع الكود التالى وفوقه.
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.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;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{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{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{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;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}بعد ذلك قم بحفظ القالب والأن أنتقل لكتابة موضوع جديد فى مدونتك والذى سوف تضه به سلايدر الصور.
فى الموضوع سوف تنتقل الى وضع html الذى يكون به الاكواد وسوف تقوم بوضع الكود التالى فيه.
<div id="Slider-wdbloog">
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1aCIilluvYz-0IhTXtk1wVZGB3VxfhvSMF_Y6H_f6jrABE3GmK7sPHkuywMHzkNlLBFxgfIFHVN8AZasZmcD07Ygr_T50XZkLZClqGKwrH923q6p0o9pwYs_D40MPAlhkSlx03_CoiR5B/s1600/%25D8%25AA%25D8%25AD%25D9%2585%25D9%258A%25D9%2584-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-Tech-Wise-%25D9%2585%25D8%25B9%25D8%25B1%25D8%25A8-%25D9%2588%25D9%2585%25D8%25B7%25D9%2588%25D8%25B1-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1-%25D9%2585%25D8%25AC%25D9%2584%25D9%2587.png" /></li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWk3fRS0P0g2qfumu1kpe7eITl-29WTknhFqTusxJtqBIPfvOFd9b-MN4I_r3qUHeoajef8TT58Vqs_5CQQeVbNHcAUdcEK4o0bWNcmo8sz4V4ht-mBwRGn356q6b3krROOUZ-w_2PsTsh/s1600/%25D8%25AA%25D8%25AD%25D9%2585%25D9%258A%25D9%2584-%25D8%25A3%25D9%2581%25D8%25B6%25D9%2584-%25D9%2588%25D8%25A3%25D8%25B3%25D8%25B1%25D8%25B9-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-%25D8%25B3%25D9%258A%25D9%2588-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1-Best-Seo-%25D9%2585%25D8%25B9%25D8%25B1%25D8%25A8-%25D9%2588%25D9%2585%25D8%25B7%25D9%2588%25D8%25B1.png" /></li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gak4uDybSMYbwWmQbuiXfJVogN2zWtsUmwcoKcJCC5VEzUPIDV7YjP4MRS0fryFfsdyHeI9agCHshPVSXq8KpOB3KlYXaL7oubSAXmMpTeFMVqz-fyrWatOP7UDkkxu7ydCdAvPKAx_G/s1600/%25D8%25AA%25D8%25AD%25D9%2585%25D9%258A%25D9%2584-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-%25D8%25AC%25D8%25B1%25D9%258A%25D8%25AF%25D8%25A9-newspaper-%25D9%2585%25D8%25B9%25D8%25B1%25D8%25A8-%25D8%25A3%25D9%2581%25D8%25B6%25D9%2584-%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8-%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1-%25D9%2587%25D8%25B0%25D8%25A7-%25D8%25A7%25D9%2584%25D8%25B9%25D8%25A7%25D9%2585.png" />
</li>
</div>
عليك الإن تغيير روابط الصور المحدده باللون الأحمر فى الكود بالصور الخاصة بك ، واذا تريد وضع صور جديده ضمن السلايدر يمكنك تكرار الكود المحدد باللون الأخضر بالعدد الذى تريده ، وبعد ذلك تقوم بنشر الموضوع.
هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .
ليست هناك تعليقات: