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

الاثنين، 15 فبراير 2016

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

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

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

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

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

أولا : اذهب الى تحرير القالب وخذ نسخة احتياطية قبل البدء فى العمل ثم ابحث عن ]]></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/AVvXsEgIEzYu9xsAhWCX4rPQhPx-VelBQa-ayBZrakctkEO51Ao66ptWrhjHCSQteQUYrFMXoAjIHJgWnuFL8f0ec4kn2W4oAUm1QLUCubyJnqSYkXCLJ_Y1nHW0MFORTe5jZOYonNaCJLny_ag/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

الاثنين، 15 فبراير 2016