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

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



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 وسهلة قدر الإمكان. إذا كنت لا تزال تحصل على مشكلة واحدة ثم لا تتردد في أن تسألنى في تعليق عن المشكل . وسوف أحاول أن أعطي الرد بأسرع ما سمح الوقت.
و أتمنى أن تعجبكم الإضافة و شكرا :) 


هل يعجبك هذا؟

إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

إشترك في النشرة البريدية للحصول على آخر المواضيع


تابعنا في اليوتيوب

تابعنا على الفيس بوك