إضافة ثيم الافتراضي شريط التمرير jQuery /Nivo Slider إلى Blogger

Nivo Slider المتزلج هو واحد من شريط التمرير بأفضل مسج المتاحة،  الآن هذا الوقت ونحن تقاسم ثيم من شريط التمرير Nivo. عروض شرائح الصور هي أفضل السبل لاظهار الصور والمشاركات المميزة والصور وأية مواد أخرى كما يحلو لك. أيضا Nivo شريط التمرير على 16 تأثير انتقال فريدة من نوعها مما يجعلها أكثر جمالا. التثبيت هذا شريط التمرير السهل جدا بحيث المدونون الجدد   أيضا يمكن تنفيذ هذه الأداة لبلوق الخاصة بهم بسهولة جدا،  لرؤية العرض تجريبي اضغط على الزر أدناه،

 

كيفية إضافة ثيم الافتراضي / شريط المتحرك / المتزلج Nivo إلى Blogger؟

من أجل فهم أفضل وأنا قسمة هذا البرنامج التعليمي في ثلاثة أجزاء،

       1..إضافة أنماط
       2.واضاف البرامج النصية / Scripts
       3. إضافة شريط تمرير

 

الخطوة 1: إضافة أنماط

      1.  انتقل إلى لوحة Blogger  > قالب
      2.  تحميل نسخة من القالب
      3.  إضغط على زر تابع
      4.  إبحث عن الكود أدناه في القالب،

 

]]></b:skin>

إضافة هذه القطعة من كود CSS أدناه مباشرة فوقه

 #slider {
     position: relative;
     border: 5px solid #333;
 }

 #slider img {
     position: absolute;
     top: 0px;
     left: 0px;
     display: none;
 }

 #slider a {
     border: 0;
     display: block;
 }

 .nivo-controlNav {
     position: absolute;
     left: 260px;
     bottom: -42px;
 }

 .nivo-controlNav a {
     display: block;
     width: 22px;
     height: 22px;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfyMyZ5mMBmgTJmZ9MJX5xvNxKGR7F2pxtIkOjZN-dvlFCHsVtZLxjOhGXzuwIwjHYTyoHk2wyWOdm99aC1y3cMIAVbMmtS7NkVEtg_cKKgkONjuvGNi13CvW-IjxT_x2FphriV1ZNDA/s400/bullets.png) no-repeat;
     text-indent: -9999px;
     border: 0;
     margin-right: 3px;
     float: left;
 }

 .nivo-controlNav a.active {
     background-position: 0 -22px;
 }

 .nivo-directionNav a {
     display: block;
     width: 30px;
     height: 30px;
     background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0    /R3v8bZsCtqo/s400/arrows.png) no-repeat;
     text-indent: -9999px;
     border: 0;
 }

 a.nivo-nextNav {
     background-position: -30px 0;
     right: 15px;
 }

 a.nivo-prevNav {
     left: 15px;
 }

 .nivo-caption {
     text-shadow: none;
     font-family: Helvetica, Arial, sans-serif;
     font-size: 16px;
     padding: 10px 0px;
 }

 .nivo-caption a {
     color: #efe9d1;
     text-decoration: underline;
 }

 .clear {
     clear: both;
 }

 .nivoSlider {
     position: relative;
 }

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

 .nivoSlider a.nivo-imageLink {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     border: 0;
     padding: 0;
     margin: 0;
     z-index: 60;
     display: none;
 }

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

 .nivo-caption {
     position: absolute;
     left: 0px;
     bottom: 0px;
     background: #000;
     color: #fff;
     opacity: 0.7;
  /* Overridden by captionOpacity setting */
     width: 100%;
     z-index: 89;
 }

 .nivo-caption p {
     padding: 5px;
     margin: 0;
 }

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

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

 .nivo-directionNav a {
     position: absolute;
     top: 45%;
     z-index: 99;
     cursor: pointer;
 }

 .nivo-prevNav {
     left: 0px;
 }

 .nivo-nextNav {
     right: 0px;
 }

 .nivo-controlNav a {
     position: relative;
     z-index: 99;
     cursor: pointer;
 }

 .nivo-controlNav a.active {
     font-weight: bold;
 }

 الخطوة 2: إضافة البرامج النصية / Scripts

الآن ابحث عن الكود تحت في القالب

  </head>

إضافة كود أدناه تماما فوقه،

 <script src="http://code.jquery.com/jquery-latest.min.js"
 type="text/javascript"></script>
 <script src="http://code.helperblogger.com/jquery.nivo.slider.js"
 type="text/javascript"></script>
 <script type="text/javascript">
     $(window).load(function () {
         $('#slider').nivoSlider();
     });
 </script>

 إحفظ القالب

الآن أنت نجحت في تنفيذ البرامج النصية لشريط المتحرك /المنزلق ، ونمط في مدونة الخاص بك، الآن دعونا إضافة المنزلق باعتباره القطعة HTML / Javascript .

الخطوة 3: إضافة شريط تمرير/ Slider

      1. انتقل الآن إلى تخطيط
      2. انقر فوق إضافة أداة
      3. اختر HTML / JavaScript
      4. لصق كود أدناه,

 <div id="slider">
     <a href="رابطك هنا"><img src="عنوان للصورة/URL " alt="" title="إضافة وصف هنا" /></a>
     <a href="رابطك هنا"><img src="عنوان للصورة/URL " alt="" title="إضافة وصف هنا" /></a>
     <a href="رابطك هنا"><img src="عنوان للصورة/URL " alt="" title="إضافة وصف هنا" /></a>
     <a href="رابطك هنا"><img src="عنوان للصورة/URL " alt="" title="إضافة وصف هنا" /></a>
 </div>

• 1.الآن استبدال "رابطك هنا" مع رابط الذي تريد إضافة إلى صورة، إذا كنت لا تريد إضافة أي رابط استبدله فقط بــ #.

• 2.استبدل عبارة "URL /عنوان للصورة" مع رابط عنوان صورة.

• 3.استبدال "إضافة وصف هنا" مع وصف صورة، إذا كنت لا تريد إضافة  وصف قم بحذف  فقط النص وتركه مكانه  فارغا. 

بحاجة إلى أي مساعدة  

أبقيت عملية التثبيت سهلة بقدر الإمكان، إذا كنت تحصل على أي مشكلة صغيرة ثم لا تتردد وضعها أدناه في مربع التعليق.

ملاحظة - إذا كان لديك في مدونتك البرنامج المساعد jQuery فإنه قد لا تعمل، فقط إزالة التعليمات البرمجية التالية من الخطوة الثانية، 
 

   <script src="http://code.jquery.com/jquery-latest.min.js"
   type="text/javascript"></script>

 أتمنى أن يعجبكم الموضوع  :)