سلايد شو القطعه المستجيبه المنزلقه مميز

بسم الله الرحمن الرحيم 

والصلآة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه افضل الصلآة والتسليم 

السلام عليكم ورحمة الله وبركاته .

اضافة سلايد شو القطعه المستجيبه المنزلقه خفيف وسريع - 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> 

منشورة في: إحترف, بلوجر