سلايدشو ذاتي إحترافي لمدونات بلوجر

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

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

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>

 وأخيرا نضغط حفظ. 

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

 أجمل ما في هذا السلايدشو أنه يمكنك تعديله حسب احتياجاتك، قبل التعديل لعلك تريد إلقاء نظرة على شكله، أليس كذلك ؟ 

معاينة

والآن كيف نجعل السلايدشو يظهر في الصفحة الرئيسية فقط ؟

1. إبحث عن <b:section class='main' id='main' showaddelement='yes'>
2. ثم سوف تجد كود الآداة الذي سوف يكون مثل هذا الكود <b:widget id='HTML5' locked='false' title='' type='HTML'> لكن الid سوف يكون مختلف
3. نغير في الكود ونضيف الكودين المحددين بالأصفر : 

<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> 

 ثم نضغط حفظ :)