سلايدر متناسق لعرض الصور بجودة عالية.

السلام عليكم ورحمه الله تعالى وبركاته مرحبا بكم في مدونه عرب تيش,

اليوم اقدم لكم طريقه انشاء سلايد شو لعرض الصور.

هو سلايد شو يقوم بعرض الصور بأناقه وجود علية ويتناسب تلقائيا مع كل حجم و مكانن افضل ل له ويمكن استعمال بداخل المواضيع ايظا

شرح طريقه التركيب:

1-ابحث عن <body/> وضع الكود التالي فوقه :

<script src='//googledrive.com/host/0B0LkZloPKBfWRXVIS0x6RFlQQjg'/>
<script type='text/javascript'>
    jQuery( document ).ready(function( $ ) {
        $( &#39;#my-slider&#39; ).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/AVvXsEiThED2RCpy1n_JKKyyHzLCDtucDUd-rQD1TkEKyfkomcU3btRmSuewKt-tASxi4OK2oYQrCefu8KvTuDltSPFpZXqbl8wvYijWNNCh4pANgyIHL_1TAiOZz6_LY0GY1WXuAt13OqtMYvIl/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>

4-التخصيص:

* كل الصور محددة باللون الأخضر تغير بخاصتك

* الهاشتاج # ضع بدله رابط الموضوع

* يمكنك إضافة صورة سابعة عبر إضافة الكود التالي أسفل </div> المحدد بالبرتقالي

<!-- Slide 7 -->
        <div class="sp-slide">
 <a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
            
            
        </div>

وهكذا يمكنك إضافة صورة 8 و 9... عبر تكرار الكود بعد </div> الكود السابق.

اضافات بلوجر