بسم الله الرحمان الرحيم , إخواني الكرام السلام عليكم و رحمة اله تعالى و بركاته .
لعلكم لاحظتم أثناء تصفحكم لمدونات أخرى إما عربية أو أجنبية وجود معرض صور يتضمن ( مجموعة من الصور يتم عرضها تلقائيا) اليوم بإذن الله سأشرح لكم كيفية إضافة هذا المعرض في مدونات البلوجر بخطوات سلسة و بسيطة , لكن قبل البدئ في التركيب لابأس في مشاهدة مثال حي على الإضافة
طريقة تركيب الاضافة
كل ماعليك فعله هو اضافة الكود التالي مباشرة في آداة HTML/JavaScript
<style type='text/css'>.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/AVvXsEh-ma2LBKjN01kWPrJrtXcCMYgyLinmJ9qDSiQ54MSZESCjCjWgkZ73I0rkZzEx6hFwpV05jQHC89j_RaCnIJ3OrOPYvoiNmSIgGc9fG0JAoR2weNGOOVw-rD7o7-JJUXhS7YwNUxCtD28E/s1600/arrows.png") repeat scroll 0 0 transparent; float: left; left: 15px; }.next { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ma2LBKjN01kWPrJrtXcCMYgyLinmJ9qDSiQ54MSZESCjCjWgkZ73I0rkZzEx6hFwpV05jQHC89j_RaCnIJ3OrOPYvoiNmSIgGc9fG0JAoR2weNGOOVw-rD7o7-JJUXhS7YwNUxCtD28E/s1600/arrows.png") repeat scroll right 0 transparent; float: right; right: 15px; }</style><script type='text/javascript'>/*<![CDATA[*/$(function() {$(".rslides").responsiveSlides({auto: true,speed: 500,timeout: 3000,nav: true,pause: true,prevText: "Previous",nextText: "Next",navContainer: "ul.rslides",});});/*]]>*/</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'></script><div class="btnt-slider"><ul class="rslides"><li><a href="#"><img alt="" src="+" /></a></li><li><a href="#"><img alt="" src="+" /></a></li><li><a href="#"><img alt="" src="+" /></a></li></ul></div>
نظرة عامة علي الكود
# : غيرها برابط مدونتك+ : غيرها برابط الصورة المراد عرضها في المعرض
أما اذا أحببت اضافة الكثير من الصور ماعليك سوي تكرار الكود التالي
<li><a href="#"><img alt="" src="+" /></a></li>
في أمان الله
اضافة رائعة جدا كنت أبحث عنها جعلها الله في ميزان حسناتك
ردحذفشكرا أخي الفاضل تشرفت بمرورك الجميل
حذف