سلايدر شو يعرض صورا بأناقة وبجودة عالية ما يميزه أنه يتناسب تلقائيا مع أي حجم والمكان الأفضل له هو بالسيدبار ويمكن استعماله بداخل المواضيع أيضا يصلح لكافة المجالات وبسهولة يمكنك نسخ صورة موضوعك ووضعها به مع رابط الموضوع لن تحتاج لتعديل مقاسها وبهذا وبدون تأخير سأدعكم مع المعاينة
شرح طريقة التركيب
1. إبحث عن </body> وضع الكود التالي فوقه
<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/AVvXsEi0Zc6MHWln7QVX8PsUft9SpNRqT7LMegHyIa50yuIsfCbz4FxHLtuM13fqbA9IUeQN8DNc1LQKhIux1njxgZCMeYU3EBlzBwjrP07u52omXqU0US6Crb8rwee-tWagVbJA0NKImFSPDfcW/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/AVvXsEh-tRaZWzWwp-XuGo8NkxT34BSyRkOrcIvK-nV8rZutxgtREn8O8ibdEuodvvIfWd52gbCpw5stBV4k0dFpAKjdmhcDsohE3j2dvDJKOo8nZEnyi2KHT3ssqawhx4weBkdXlnLvra3I7QU/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/AVvXsEj_9Pu59bGY-Pfqh-nhRJGM9hB2MfQpxD_twcCgnFevqLxWFr9HxpYskEeP03EgMKoW-Av-Rp12psn93KTZWhymS8BZ7srTIMgufFVstsKr0IBD6MQVDnb80OcpoGmIX8mvIemJq3-2Pf4_/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/AVvXsEgcEqQBVlnVSQ6inMIN1AZBYVzfJUwGtQgYZeIAmYPbNocCXLV-Cv_QrreEBrwcOc7pF-tH0ERdIa4WHmPcSApkWhi7I8FC438C1JLCleFiYLXMDliUesNCerX5MRQxxOAJD8p3gjoItGM/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/AVvXsEhOol-pFJdvvoYHHA9rDTIaVXaRuYXBwkSDO_bWjeVRn83pVg7v5wjiNHEJuK-ZKzIHXdE-p0DeIwHQ7PKAKfZR6YjKcVGQAGaYNh-EBL-MCU7BE_1ACYbXlPyPbZ70qwQLVYWJrWGy5hny/s1600/6.jpg "/></a>
</div>
التخصيص
* كل الصور محددة باللون الأخضر تغير بخاصتك
* الهاشتاج # ضع بدله رابط الموضوع
* يمكنك إضافة صورة سابعة عبر إضافة الكود التالي أسفل </div>
<!-- Slide 7 -->
<div class="sp-slide">
<a href="رابط الموضوع " target="_blank"> <img class="sp-image" src="رابط الصورة "/></a>
</div>
وهكذا يمكنك إضافة صورة 8 و 9... عبر تكرار الكود بعد </div>
Top
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).