آخر المواضيع
جاري التحميل...
الجمعة، 12 يوليو، 2013

في
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،

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

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


  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> 
 ثم نضغط حفظ :)

المحرر : عماد عادل
عماد عادل هو مدون يبلغ من العمر 14 سنة، يعيش في القيروان، تونس. مصمم ومدون ومؤسس المختبرات العربية، يحب نشر الأفكار الجديدة ويسعى إلى تطوير المحتوى العربي الهزيل. الملف الشخصي
تابعه على : فيس بوك | تويتر | جوجل بلس | بنترست | دفيان آرت | يوتيوب | الموقع.
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،

0 تعليقات:

إرسال تعليق