سلايدشو صحيفة حصريا لمدونات بلوجر

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

معاينة

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

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

.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}

.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PJY6c33bRs0_6HLCUtx6yRgisfhQj67lNTjqwHavqzhyphenhyphenKSzlZL9v7loTs9GvdyDz-cC8c2hWy51WBWGrZW_SMtHRHuf4dT8efe4-tE65idwG-jnRfMYCieFz_A2jx98sSHuBd8v4Ghw/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}

.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}

.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}

.ei-slider-large li img{width:100%;border:0;padding:0}

.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}

.ei-title p{text-align:left}

.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}

.ei-title h2 a {color: white;text-decoration: none;}

.ei-title h2 a:hover{text-decoration:none;color:#9E0505}

.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}

.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}

.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}

.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505}

.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}

.ei-slider-thumbs li a:hover{background-color:#f0f0f0}

.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}

.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}

@media only screen and (max-width:479px){

  .ei-slider{height:200px}

  .ei-title{bottom:5%}

  .ei-title h2{font-size:14px;line-height:17px}

}

</style>

<div id="autoelastic">

</div>

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

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

AutoElasticSlideshow({

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

MaxPost:5,

idcontaint:"#autoelastic",

ImageSize:400,

Summary:100,

animation:'center',

speed:800,

easing:'',

titlesFactor:0.60,

titlespeed:800,

titleeasing:'',

thumbMaxWidth:150,

Interval:3000,

autoplay:true,

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

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> 

 ثم نضغط حفظ :)