معهد خبراء بلوجر - اضافة معرض الصور بشكل جديد وحصري

http://3.bp.blogspot.com/-eUvPXBSk46...ger%2BBlog.jpg

بسم الله الرحمان الرحيم , إخواني الكرام السلام عليكم و رحمة اله تعالى و بركاته .
لعلكم لاحظتم أثناء تصفحكم لمدونات أخرى إما عربية أو أجنبية وجود معرض صور يتضمن ( مجموعة من الصور يتم عرضها تلقائيا) اليوم بإذن الله سأشرح لكم كيفية إضافة هذا المعرض في مدونات البلوجر بخطوات سلسة و بسيطة , لكن قبل البدئ في التركيب لابأس في مشاهدة مثال حي على الإضافة

معاينة

طريقة تركيب الاضافة

كل ماعليك فعله هو اضافة الكود التالي مباشرة في آداة HTML/JavaScript

كود بلغة HTML:

<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("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/s1600/arrows.png") repeat scroll 0 0 transparent; float: left; left: 15px; }

.next { background: url("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/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>

في أمان الله

المصدر