سلايدر احترافي لعرض الصور |
طريقة التركيب
الأن بعد ان قمت بمعاينة السلايدر تابع معي طريقة تركيب هذه الأداة1. إبحث عن </body> باستعمال ( Ctrl+f) وضع الكود التالي فوقه :
<script src='//googledrive.com/host/0B0LkZloPKBfWRXVIS0x6RFlQQjg'/>
<script type='text/javascript'>
jQuery( document ).ready(function( $ ) {
$( '#my-slider' ).sliderPro();
});
</script>
2. إبحث عن </head> وضع الكود التالي فوقه :
<link href='//googledrive.com/host/0B0LkZloPKBfWNHQ2TDVGYkpZRFU' rel='stylesheet'/>
3. إذهب إلى التخطيط وقم بإضفة أداة Html/Javascript جديدة بالمكان الذي يناسبك وضع بها الكود الآتي :
<div class="slider-pro" id="my-slider">
<div class="sp-slides">
<!-- Slide 1 -->
<div class="sp-slide">
<a href="#" target="_blank"><img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqOIMbF3wM6JYzfPp2kF8t2QSb9WEwR8el1q4pvGYGyMqxQvsMfkuJtVLCdvhzOOoBW_2RztwiYdUHweSKhQps5mYKsF1qUQEoUfo_iGXsgt_m4vxKsEjQ8bxOT8Ulm_aPeAZq_IEIvml/s1600/Pro1.png"/></a>
</div>
<!-- Slide 2 -->
<div class="sp-slide">
<a href="#" target="_blank"> <img class="sp-image" src="http://3.bp.blogspot.com/-h0KxM6-112I/Vd4qB8DabXI/AAAAAAAALJw/qjE4HfTk_BU/s1600/Tag%2Band%2BStyling%2BVienna%2BLite%2B2.jpg"/></a>
</div>
<!-- Slide 3 -->
<div class="sp-slide">
<a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYc-NXTprUHXPYA0wI_8oz61ll58_SW0fKIMDYxW3L8xiVmaRgwzsxKgSXZ1ImRwfh5NvJnIfnsMhEqgc4utity365kzNS8PtvIxxFfEw90pJBa-oFl3ccEuIcnpXMbWkPa2M11jGIEE/s1600/2014_rio_2_movie-1280x800.jpg"/></a>
</div>
<!-- Slide 4 -->
<div class="sp-slide">
<a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuImVv9mpDbIdK3cc-s_zzWDaXePPBk8rbAYDG3KybysBoayt8t8guXKK1HyxfxyI-aJcPNnhxay8Di6fvhTWkGwjgDZ5F9HvkFerJRVP0ARqbKkONde0wuhippXT6u3U6QLjcxlUgMDA/s1600/nickwordc.jpg"/></a>
</div>
<!-- Slide 5 -->
<div class="sp-slide">
<a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3AhEHbQpaSOTR0tQFxNFqUUrkIvCbxp2LCfozr9tWYh1Pzm96FbRjfyES_9E-EyTGw3XpDLHqofhgloD7l1ASrrgvO1W2csg6uYTPmTT8v8I1nTu9ilmiuqzyNzAQ_E5LzX5Ng-T5X0/s1600/work_03.png"/></a>
</div>
<!-- Slide 6 -->
<div class="sp-slide">
<a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNUsiIJzD6-7e25CMPnK7X2JDHJDix66x6Hrlolcx5QTyOeqUHOmnSMAO5VMEuQurshig8L4xhC6DWNsAZ7nA6TBeNLtti-lqnITeao5tGV20t3lKjtUAu6HAHHv8xF1BJyGGVRraE8Wvm/s1600/6.jpg"/></a>
</div>
</div>
</div>
اما الهاشتاج # قم بإستبداله بروابط مواضيعيك
ومبروك عليك سلايدر إحترافي لعرض الصور
ولإضافة صورة سابعة أو العدد الذي تريده اضف الكود التالي أسفل </div> الملون بالأزرق
<!-- Slide 7 -->
<div class="sp-slide">
<a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
</div>
0تعليقات