سلايد شو تلقائى لمدونات بلوجر

سلايد شو تلقائى لمدونات بلوجر

يحتاج الكثير من اصحاب ومالكى مدونات بلوجر الى سلايد شو تلقائى ليقوم بعرض اخر المقالات بشكل الى واوتوماتيكى 

لذا احضرنا اليوم سلايد شو تلقائى بشكل جذاب ليقوم بعرض احدث المقالات كما انه يحتوى على صورة بارزة ويعرض جزء

 من نص المقال وزر شاهد الموضوع  .

لنتعرف على طريقة تركيب سلايد شو تلقائى :

 أولا : اذهب الى تحرير القالب وخذ نسخة احتياطية قبل البدء فى العمل ثم ابحث عن ]]></b:skin> باستخدام أمر  CTRL+F

او يمكنك وضعه ما بين  <style> </style> فوق وسم </head>

ثانيا : ضع الكود فوقه

/*Slider V1 www.ar1web.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIeLK7SWVvOv2pFokGYwQx2iHiJ06JaY8LTKFnhh9FlIWx-Z7w8lpiG_WFP4Y56i6FQtLM_fQBu1Hftl76egZWrhNbQefGdcTyXw3rPtE3EYYh1dMtpk6dLCE61AaZ9Pa1T3Z30nrUPQ/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');
}

ثالثا: ابحث عن </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'/>

 رابعا : عليك اختيار مكان وضع الكود التالى ولكن يفضل وضعه فوق المواضيع ولوضعه فوق المواضيع 

ابحث عن  <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 

By glok

Similiar tagsاضافات بلوجر