نقدم لكم اليوم موضوع آخر حول أدوات العرض "السلايدشو" حيث سبق لنا في موضوع سابق أن قدمنا لكم سلايدشو يمكن تركيبه في القائمة الجانبية (السايدبار)، أما اليوم فموضوعنا مختلف حيث سنقدم لكم سلايدشو يمكن وضعه فوق المواضيع في الصفحة الرئيسية أو في كل الصفحات، هذا السلايدشو إحترافي وجميل ويعتمد على تأثيرات إحترافية  لا نطيل أكثر وندخل في الموضوع وطريقة التركيب.

إضافة أداة فوق رسائل المدونة الإلكترونية

1. ندخل إلى لوحة التحكم > القالب > تحرير HTML 
2. نبحث الآن عن الكود التالي : <b:section class='main' id='main' showaddelement='no'>
3. ونعوضه بـ : <b:section class='main' id='main' showaddelement='yes'>
4. نحفظ القالب 

تركيب السلايدشو

 <style scoped="" type="text/css">

#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}

.coin-slider{overflow:hidden;zoom:1;position:relative}

.coin-slider a{text-decoration:none;outline:none;border:none}

.cs-buttons{font-size:0;padding:10px;float:left}

.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}

.cs-active{background-color:#B8C4CF;color:#FFFFFF}

.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}

a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}

.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}

.cs-title strong{display:block;font-size:120%}

.cs-title p{margin:0}

.cs-title cite{font-size:90%}

.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}

.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

var AutoCoinConfig = { 

 url_blog: "http://blogging.arabiclabs.com", 

 MaxPost: 7, 

 cmtext: "تعليق", 

 MonthNames : ["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"], 

 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", 

 NoCmtext : "لا يوجد تعليقات",

 imageSize :500,

 SumChars : 100,

 tagName:false,

 width: 500,

 height: 250,

 spw: 7,

 sph: 5,

 delay: 3000,

 sDelay: 30, 

 opacity: 0.7,

 titleSpeed: 500,

 effect: '',

 navigation: true,

 links : true,

 hoverPause: true,

 prevText: 'السابق',

 nextText: 'التالي'

};

</script>

<script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>

تخصيص الأداة والمعاينة

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  < b: include  name = 'QuickEdit' />
</b:if>
</b:includable>
</b:widget>