القائمة

Slider NiVo شريط التمرير المتزلج او المنزلق في Blogger

تاريخ النشر : 04‏/08‏/2012



Nivo slider  هو واحد من أفضل شريط التمرير المتاحة على شبكة الإنترنت. تقاسمت أنا نسخ من شريط التمرير Nivo على Stupcomp حتى الآن،إضافة ثيم الافتراضي شريط التمرير jQuery /Nivo Slider إلى Blogger, ولكن اليوم أنا أشارك نسخة مخصصة من المنزلق Nivo. في هذا الإصدار المخصص يتم تخصيصها لشرح و لجعلها أكثر جمالا أيضا كما هو الحال دائما أنا أحفظ على  تركيب سهلة قدر الإمكان يجب عليك نسخ ولصق الكود البرمجية فقط . الآن يتيح معرفة كيفية إضافته إلى مدونتك بلوجر .


كيفية إضافة هذا Slider إلى Blogger؟

1- تحديد الصور التي تريد إضافتها في شريط التمرير 'Slider'
2- تغيير حجمها إلى حجم نفسه.
3- تحميله والحصول على رابط.
4- انتقل الآن إلى لوحة التحكم الرئيسية Blogger > تخطيط  
5- انقر على إضافة أداة (تحت من header)
6- اختر HTML/JavaScript
7- لصق كود أدناه في داخله،



<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://2.bp.blogspot.com/-g_Eipd24SIQ/UBwSRk_nXBI/AAAAAAAACz0/lVsc6AvQWzo/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="http://4.bp.blogspot.com/-oXh96HmmJXI/UBwRGFfZxiI/AAAAAAAACzs/BKCay8mJcvE/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="http://3.bp.blogspot.com/-O6gjNPiebwc/UBwREzdVzPI/AAAAAAAACzk/QdXbjGYwclM/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="http://2.bp.blogspot.com/-7g47XCf9U2Y/UBwRCh7WkaI/AAAAAAAACzc/4pmq9IXY5zk/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="http://4.bp.blogspot.com/-FTx7ipAY2z4/UBwRAaa5eRI/AAAAAAAACzU/Ozp_LQHhIHs/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="http://4.bp.blogspot.com/-6yJQkb7_z8s/UBwQ-BqQKRI/AAAAAAAACzM/xtaCrM9BhCg/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>


     - العرض والارتفاع Slider 

ضبط العرض والارتفاع من شريط التمرير'Slider' وفقا للعرض صورك وارتفاع

     - رابط الصورة URL

استبدال كافة العناوين URL صورة المشير له بلون      مع رابط صورك الخاصة.

     - توضيحية صورة 

هنا يمكنك ان تضيف شرح صورتك

     - jQuery Library


إذا كنت قد قمت بالفعل بإضافة jQuery Library لمدونتك بلوجر قم بإزالة الكود الموجود في لون      .


 أخيرا حفظ القطعة الخاصة بك فتكون قد أنهيت العملية .

أبقيت تثبيت في  الخطوة 1 وسهلة قدر الإمكان. إذا كنت لا تزال تحصل على مشكلة واحدة ثم لا تتردد في أن تسألنى في تعليق عن المشكل . وسوف أحاول أن أعطي الرد بأسرع ما سمح الوقت.
و أتمنى أن تعجبكم الإضافة و شكرا :)