بسم
الله الرحمن الرحيم
والصلآة
والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه افضل الصلآة والتسليم
السلام
عليكم ورحمة الله وبركاته .
اضافة
سلايد شو القطعه المستجيبه المنزلقه خفيف وسريع - responsive
slider widget for blogger اتيت
لكم اليوم سلايد شو خفيف ومميز من نوعه وبسيط لمدونة بلوجر , هذه القطعه تركيبها
سهل للغاية ولا
توجد فيها صعوبات وهي متناسبه مع جميع المتصفحات .
هذا النوع من سلايد شو يسمى بالقطعه المستجيبه المنزلقه
( Responsive Slider ) وهي تعتبر
من افضل قطع سلايد شو نسبه
الى توافقها .
كيف تضيف سلايد شو القطعه المنزلقه المستجيبه الى مدونتك
=؟
اتبع
الخطوات الاتي بكل تفاصيلها :
§
ادخل مدونتك
§
ثم التخطيط
§
ثم اضافة قطعه HTML/JavaScript .
§
الان انسخ هذا الكود
وضعه داخلها .
<!--- Thesis Widget by e7tarif.com --->
<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://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.png")
repeat scroll 0 0 transparent; float: left; left: 15px; }
.next { background:
url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.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>
<a href="http://e7tarif.com"
></a>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src='https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-responsive-slider.js'
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>
<li><a href="الرابط الرابع"><img alt="عنوان الصورة" src="رابط الصورة الرابعه" /></a></li>
<li><a href="الرابط الخامس"><img alt="عنوان الصورة" src="رابط الصورة الخامسه" /></a></li>
</ul>
</div>
<!--- Thesis Widget by e7tarift.com --->
<span style="float:right ; font-size: 10px;
font-weight: normal; line-height: 0px; margin-top: 15px;">
<a
href="www.e7tarif.com" style="color: black;">احصل على الاضافه</a></span>
التعديلات على الكود :
اللون الاحمر : رابط الموضوع او الصفحة .
اللون الازرق : اسم الصورة او وصف الصورة .
اللون الاخضر : رابط الصورة .
ملاحظة :
اذا اردت سلايد شو يظهر فقط في الصفحة الرئيسيه اتبع
الاتي :
:blog.url == data:blog.homepageUrl'>
<!-- ضع هنا كود سلايد شو
لكي يظهر في الصفحة الرئيسيه -->
</b:if>
