إضافه سلايد شو تلقائي احترافي لمدونات بلوجر V1

السلام عليكم .... �� , اليوم اتيت لكم بدرس رائع وهوه إضافه سلايد شو تلقائي احترافي لمدونات بلوجر, بشكل انيق ومميز ⭐ , السلايدر تلقائي �� يعرض أجدد المواضيع يحتوي على صورة وزر " اقرأ المزيد " وكذلك نبذة عن الموضوع , ويتميز بالوانة المريحة للعين والجذابة.
==> لذا وبدون إطالة أترككم مع المعاينة <==


شرح طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. وضع الكود التالي فوقه

الكود

/*Slider V1 www.Pro7web.com */
#featuredSlider{ background: #fff; float: right; margin: 10px; padding: 0 0 10px; border: 1px solid #E4E3E3;width: 96.2%;height: 285px;position: relative; color: #666;direction: rtl; }
.featured-thumb {float: right; margin: 5px 0; padding: 0px; padding-left: 10px;}
#featuredSlider .container { margin:8px 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle { padding-top: 15px; font: 16px droid arabic kufi, serif; text-align: right; font-weight: 700;}
.featuredTitle a{color:#FC4F3F}
.featuredTitle a:hover{color:#000}
p.text-ar1web { font: 12px/1.9em tahoma;}
a.readmore {float: right; border: 1px solid #BFBFBF; background: #FFF; display: block; font: bold 10px droid arabic kufi; margin: 10px 0 0 0; padding: 4px 10px; color: #383737;}
a.readmore:hover {color: #FC4F3F;border:1px solid #ABAAAA;}
.slides{width:100%!important;height:280px!important}
.navigation {float:left;overflow:hidden;position: relative;bottom:7px}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(http://2.bp.blogspot.com/-j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }

/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}

3. ابحث عن </head> ثم ضع قبله الكود التالي

الكود

<script src='//cdn.rawgit.com/iHussam/ar1web/master/cycle.js' type='text/javascript'/>
<script src='//cdn.rawgit.com/iHussam/ar1web/master/slider2.js' type='text/javascript'/>

4. يتمثل الكود التالي في وضعه بالمكان المناسب لك وأفضل مكانه له هو فوق المواضيع كما بالمعاينة
لذا إن أردت وضعه هناك فابحث عن <b:section class='main' id='main' showaddelement='no'>
بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه

الكود

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featuredSlider'>
<div class='container'>
 
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 2000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>
         </div> <!--end .container-->
</div> 
</b:if>

التغييرات الأساسية
1. لتعديل مقاس السلايدر فالرقم محدد بالأحمر في كود المرحلة 1
2. لتعديل توقيت سرعة المواضيع فالرقم محدد بالأزرق في كود المرحلة 4 إذا أردت تسريعه فعليك خفض الرقم مثلا من 2000 إلى 1000 والعكس إذا أردت تبطيئه
3. إن كنت تتوفر على خط Droid Arabic Kufi فقم بحذفه من الكود الأول هو محدد بالبرتقالي


لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

  1. لم تنجح الطريقة معايا

    ردحذف
    الردود
    1. السلام عليكم....
      حاول مرة اخري يا اخي ، الطريقه استخدمها في مدونة اخري وتعمل بطريقه جيدة
      ان لم تستطع فقم بمراسلتي مجددا لآضيفها لك بنفسي

      حذف
  2. برنس الطريقه نجحت وشغاله ميه ميه
    شكرا لكم

    ردحذف
    الردود
    1. العفو يا غالي (y) مرحبا بك في اي وقت

      حذف
  3. شكرا اخى لكن اريد السلايد شو الخاص بك

    ردحذف
    الردود
    1. سيتم عرضه قريبا بأذن الله

      حذف
  4. السلام عليكم و رحمة لله ، اولا شكرا على السلايد شو الرائع

    بكن عندي مشكل ، انزل السلايد ينزل عادي .. لكن بالبار الي فوق مكان ازرار الاشتراك يتغير مكانهم يرجعو للوسط ، لم اعرف السبب للأسف

    في حالة كنت تعرف اي حل قد يساعد ، رجاءا لا تبخل علي به .

    ردحذف
    الردود
    1. وعليكم السلام , عزيزي Gaming Arts
      قم بعمل ScreenShot للمشكلة التي عندك
      وسوف نحلها لك بأذن الله

      حذف

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ