شرح إضافة سلايدر شو أنيق لمدونة على بلوجر

 

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

السلام عليكم إ خواني زوار ورواد مدونة هرّي آرت ...!!
اليوم سوف أقوم بشرح و طرح إضافة جد جد مميزة مهمة جدا لأصحاب المدونات بلوجر و بالأخص المدونات التقنية ...الإضافة عبارة عن سلايدر شو أنيق و مميز بشكل الفريد و البسيط الذي يعطي لمسة إحترافية و رونق رائع لمدونتك .
وبدون إطالة عليكم إخواني لنبدأ على بركة الله الشرح !!

أولا إفتح مدونتك و توجه إلى لوحة التحكم الخاص ببلوجر .

° تم التخطيط.

° ثم بإضافة أداة ~  HTML/JAVASCRIPT

° قم بنسخ هذ الكود و ضعه داخل الأداة التي قمت بفتحها .

-------------------------------------------------------------------------------------------------------------------------------------

<!--- Thesis Widget by  Herri-Art.blogspot.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://Herri-Art.blogspot.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  Herri-Art.blogspot.com --->
<span style="float:right ; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;">
 <a href="http://7loll.blogspot.com/2013/05/responsive-slider-widget-for-blogger.html" style="color: black;">احصل على الاضافه</a></span>

 -----------------------------------------------------------------------------------------------------------------------------

 

 التعديلات على الكود : 
اللون الاحمر : رابط الموضوع او الصفحة .
اللون الازرق : اسم الصورة او وصف الصورة .
اللون الاخضر : رابط الصورة .

ملاحظة : 
اذا اردت سلايد شو يظهر فقط في الصفحة الرئيسيه اتبع الاتي :

-----------------------------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.url == data:blog.homepageUrl'>

 <!-- ضع هنا كود سلايد شو لكي يظهر في الصفحة الرئيسيه -->

 </b:if> 

------------------------------------------------------------------------------------------------------------------------------------

 

إلى هنا إخواني أكون قد انتهيت من الشرح و مبرووك عليكم السلايدر شو ..

ولا تبخلوا علينا بطرح تسائلاتكم أو تعلياقاتكم " كلمة شكر تكفي" 

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