سلايدر متناسق لعرض الصور

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

• معاينة

شرح طريقة التركيب
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/AVvXsEh5KrO6RO1FrnVeZttJCDt1LTeS0Znyqg4Dvc3ZklURS4uOdG6wCLtff_R7D0M9RpdIcdL10kGy8gfxvpZIwMZ7H2gpq3_YzPnCFhq-VVbBMim0p8IwaN2xU5r0SeXJEtF8DrF3NNLq4rJk/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/AVvXsEhhDF3xpP7YWfloHJlNyJEuyqHQkQhB7F6a45NA5VV3B1zthRQ7L14Ao4UVx4A4HnYjevphvvWDFZghJIKC10vRw9zp9rDlIgM6mdvv9ruNjbG7wNFnNe0_QFke30DfEFWAoIuwkLNTVUY/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/AVvXsEg7W5rGn_HjCJbnEOF1XCIaWNd9vGNSnwWp7jfksWJvruSA20ddfjzUzJlEDHWbYNxwIxgyfC5D2A4mxIgcHBOuMb6Lv3bWqKdvOHjtce0Ek-w2JlkWRzntIb5NMJzpQE3Bhq6Z1bi1gHne/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/AVvXsEiJ3R99lFju4w5-hEbxPpf0X9QYNkmfJVm8OodzBBUPo6mapxy2ypJ_59GGnqcDXP4WIrfRDMlrUQEY-FvWAA9QDaS2u-you_ED96mwQA6NjokLQM1crQqK8AOwtP9bH-_7xI2wc9-Dc1M/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/AVvXsEikyfm-73O3bhwPtP0PV289cxQ-EGZSE8C10ojGE4kDh7vyf79cewU97v6zgBoB9Y-28vc4v9I2r73zRpLEpI4Df1-GZ0aQkcymGoKfv29rzfBQkCtF6cSFx1BRs-ULbljSSzs2mSpjv_YB/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>

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