إضافه سلايد شو تلقائي احترافي لمدونات بلوجر 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 فقم بحذفه من الكود الأول هو محدد بالبرتقالي


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

4 التعليقات

avatar

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

avatar

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

avatar

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

avatar

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

الإبتساماتالإبتسامات

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