»نشرت فى : »بواسطة : »ليست هناك تعليقات

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

السلام عليكم ورحمه الله تعالى وبركاته مرحبا بكم في مدونه عرب تيش
اليوم اقدم لكم طريقه انشاء سلايد شو لعرض الصور.

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

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

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="http://3.bp.blogspot.com/-7VgyBrRkJ3E/VfgUc-QjMMI/AAAAAAAAI38/GIgR1JewiJY/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> الكود السابق.

    اضف تعليقاً عبر:

  • blogger
  • disqus

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

كافة الحقوق محفوظة لمدونة عرب تيش 2016