بسم الله الرحمان الرحيم , إخواني الكرام السلام عليكم و رحمة اله تعالى و بركاته .
لعلكم لاحظتم أثناء تصفحكم لمدونات أخرى إما عربية أو أجنبية وجود معرض صور
يتضمن ( مجموعة من الصور يتم عرضها تلقائيا) اليوم بإذن الله سأشرح لكم
كيفية إضافة هذا المعرض في مدونات البلوجر بخطوات سلسة و بسيطة , لكن قبل
البدئ في التركيب لابأس في مشاهدة مثال حي على الإضافة
طريقة تركيب الاضافة
كل ماعليك فعله هو اضافة الكود التالي مباشرة في آداة HTML/JavaScript
.btnt-slider { margin: 30px auto; max-width: 850px; padding: 0 20px; }.rslides { list-style: none outside none; margin: 0 auto; max-height: 400px; max-width: 800px; overflow: hidden; padding: 0; position: relative; width: 100%; }.rslides li { -webkit-backface-visibility: hidden; position: absolute; border: 5px solid #555; display: none; left: 0; top: 0; margin: 0; padding: 0; list-style: none; }.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; margin: 0; max-width: 100%; }ul.rslides .rslides_nav { height: 30px; position: absolute; text-indent: -99999px; top: 45%; width: 30px; z-index: 9999; display: none; }ul.rslides:hover .rslides_nav { display: block; }.prev { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNo2Op0dVGZ8RKyX1YFWUvrJwHxd03kkUksE_S9alxY_2fhyphenhyphenVYl_WlsvCdsPs3zuD4e1_2O5szB_E5v1VpFrtizAEZ8nFbNREDuIw4wGrCHbI-ILG0j5Xq6dcFw3JCjbprevhAxawTFZla/s1600/arrows.png") repeat scroll 0 0 transparent; float: left; left: 15px; }.next { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNo2Op0dVGZ8RKyX1YFWUvrJwHxd03kkUksE_S9alxY_2fhyphenhyphenVYl_WlsvCdsPs3zuD4e1_2O5szB_E5v1VpFrtizAEZ8nFbNREDuIw4wGrCHbI-ILG0j5Xq6dcFw3JCjbprevhAxawTFZla/s1600/arrows.png") repeat scroll right 0 transparent; float: right; right: 15px; }/*$(function() {$(".rslides").responsiveSlides({auto: true,speed: 500,timeout: 3000,nav: true,pause: true,prevText: "Previous",nextText: "Next",navContainer: "ul.rslides",});});/*]]>*/
نظرة عامة علي الكود
# : غيرها برابط مدونتك+ : غيرها برابط الصورة المراد عرضها في المعرض
أما اذا أحببت اضافة الكثير من الصور ماعليك سوي تكرار الكود التالي
">#
في أمان الله




0 التعليقات:
إرسال تعليق