آخر المواضيع
جاري التحميل...
الثلاثاء، 9 يوليو 2013

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

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

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


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

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

لتركيب السلايدشو ندخل إلى لوحة التحكم > تخطيط > نضغط على زر إضافة أداة فوق المواضيع مثلما هو موضح في الصورة أعلاه ونختار أداة HTML/JAVASCRIPT ونضع الكود التالي : 

<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Bfl9_M70ITZ8viasN1w2XG-kvCbWZXDKnHXUaEODA9APqEtzhdkDuZy3_DPw6EhInyqCuNfF3Dp4FBrbll_SFRcTFj8lrpNjNbbkYIsGp0JW09PGSCOWe4kP_oPZtx30flihQQ86oRs/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";right:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;right:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;float:left;}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://blogging.arabiclabs.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
MonthNames:["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],
tagName:false
});
});
//]]>
</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 تعليقات:

إرسال تعليق