اضافة سلايدر شو احترافي وحصري للبلوجر 2017

اضافة سلايدر شو احترافي وحصري للبلوجر 2017

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

معاينة السلايد شو

معاينة

• من لوحة التحكم >> قالب>> تحرير html
• قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

 واضف الكود التالي فوقه مباشرة

body {
  margin: 0 0 0 0;
  color: darkGray;
  background-color: rgba(20, 20, 20, .97);
  font-family: 'Source Sans Pro', sans-serif;
  text-rendering: optimizeLegibility;
}
.grid-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.grid-item {
  position: relative;
  overflow: hidden;
  margin: 0.2%;
  height: 0px;
}
.grid-item:hover {
  transform: scale(0.97);
  cursor: pointer;
}
.grid-item:active {
  transform: scale(0.93);
  cursor: pointer;
}
.medium {
  width: 19.6%;
  padding-bottom: 19.6%;
}
.wide {
  width: 39.6%;
  padding-bottom: 19.6%;
}
.large {
  width: 39.6%;
  padding-bottom: 39.55%;
}
.grid-item img {
  overflow: hidden;
  width: 105%;
}
.grid-item .info {
  overflow: hidden;
  position: absolute;
  background-color: rgba(15, 15, 15, 0.9);
  bottom: 0;
  height: auto;
  left: 0;
  width: 100%;
  font-size: 100%;
  transition: all 0.25s ease-in-out;
}
.grid-item .show-info {
  height: 100%;
}
.grid-item .hide-info {
  height: 30%;
  max-height: 60px;
}
.grid-item .title {
  margin-top: 5px;
  font-size: 15px;
  padding: 1%;
}
.grid-item .date {
  padding: 1%;
  padding-top: 5px;
  font-size: 13px;
}
.grid-item .description {
  margin-top: 15px;
  font-size: 13px;
  padding: 1%;
}
.grid-item button {
  visibility: collapse;
  text-align: center;
  background: #0096a0;
  color: white;
  position: absolute;
  text-decoration: none;
  border: none;
  left: 50%;
  right: 50%;
  bottom: 25px;
  margin: -20px -50px;
  width: 100px;
  height: 30px;
  transition: background-color 0.1s;
  transition: height 0.1s;
}
.grid-item button:hover {
  background-color: rgba(30, 30, 30, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
.grid-item button:active {
  background-color: rgba(20, 20, 20, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
@media all and (max-width:680px) {
  .medium {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .wide {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .large {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
}

•  ضع فوق

 </body>

•  الكود التالي 

<script type='text/javascript'>
//<![CDATA[
'use strict';
$(document).ready(function () {
    var zindex = 10;
    $('.grid-item').click(function () {
        var clickedElment = $(this);
        $('.grid-item').find('> .info').removeClass('show-info');
        $('.grid-item').find('> .info').addClass('hide-info');
        $('.grid-item').find('> .info button').css('visibility', 'collapse');
        if (clickedElment.find('> .info').hasClass('hide-info')) {
            clickedElment.find('> .info').removeClass('hide-info');
            clickedElment.find('> .info').addClass('show-info');
            ;
            clickedElment.find('> .info button').css('visibility', 'visible');
        }
    });
});
//]]>
</script>

 قم بحفظ العمل

•  توجه إلى التخطيط وأضف أداة Html/JavaScript ثم ضع بها الكود التالي

-<div class="grid-container">
  <div class="grid-item large floatLeft">
    <img src="http://previewcf.turbosquid.com/Preview/2014/05/15__23_36_27/4.jpge6f857fa-d0a7-4085-abd5-63992f3de86dLarge.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item wide floatLeft">
    <img src="http://tf3dm.com/imgd/l48919-spaceship-98075.jpg" />
    <div class="info hide-info">
            <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatLeft">
    <img src="https://cdn.designmaz.net/wp-content/uploads/2014/01/Dark-UI-Kit.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item medium floatLeft">
    <img src="http://core0.staticworld.net/images/article/2015/05/windows10musicapp-100587050-orig.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatLeft">
    <img src="http://www.wp7connect.com/wp-content/uploads/2013/01/conceptsurfacephone1.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item medium floatLeft">
    <img src="https://img-new.cgtrader.com/items/117013/large_werewolf_3d_model_fbx_9a431241-46fa-4be8-a86f-3095f591306a.png" />
    <div class="info hide-info">
    <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatLeft">
    <img src="http://braginteractive.com/wp-content/uploads/2013/04/bootstrap-website-template-600x400.png" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatLeft">
    <img src="https://m2.behance.net/rendition/pm/18085575/disp/d3a9b79d9731058b0eacad368941f0e2.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatLeft">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-wNmZDD3wH8ePtmpSuH8uv86SaDxtUyDVRtBu96q711QG_H1hyphenhyphenZDqxtjvfeYRYU4UszzZ2In9V7Mv5zLd7CRNahu3ESR2VwWkk-qXE_1Ial7YRhMcoA0q_6ol22TUidFkINSYyXS9Ps/s1600/mech+mecha+giant+robot+concept+art+design+chain+gun+machinegun+gattling+gun+design+walker+carrier+sci+fi+wallpaper+borderlands+2+3.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item large floatRight">
    <img src="http://previewcf.turbosquid.com/Preview/2014/05/15__23_36_27/4.jpge6f857fa-d0a7-4085-abd5-63992f3de86dLarge.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item wide floatRight">
    <img src="http://tf3dm.com/imgd/l48919-spaceship-98075.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://cdn.designmaz.net/wp-content/uploads/2014/01/Dark-UI-Kit.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item medium floatRight">
    <img src="http://core0.staticworld.net/images/article/2015/05/windows10musicapp-100587050-orig.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="http://www.wp7connect.com/wp-content/uploads/2013/01/conceptsurfacephone1.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>

  <div class="grid-item medium floatRight">
    <img src="https://img-new.cgtrader.com/items/117013/large_werewolf_3d_model_fbx_9a431241-46fa-4be8-a86f-3095f591306a.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatRight">
    <img src="http://braginteractive.com/wp-content/uploads/2013/04/bootstrap-website-template-600x400.png" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://m2.behance.net/rendition/pm/18085575/disp/d3a9b79d9731058b0eacad368941f0e2.jpg" />
    <div class="info hide-info">
    <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatRight">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-wNmZDD3wH8ePtmpSuH8uv86SaDxtUyDVRtBu96q711QG_H1hyphenhyphenZDqxtjvfeYRYU4UszzZ2In9V7Mv5zLd7CRNahu3ESR2VwWkk-qXE_1Ial7YRhMcoA0q_6ol22TUidFkINSYyXS9Ps/s1600/mech+mecha+giant+robot+concept+art+design+chain+gun+machinegun+gattling+gun+design+walker+carrier+sci+fi+wallpaper+borderlands+2+3.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">نص تجريبي نص </div>
      <button>اقرا المزيد</button>
    </div>
  </div>
</div>

ملاحظة : قم بتغير ما يلي
الصورة
الاسم
الوصف

واخيرا احفض الاداة ومبروك عليك الاضافة

***********************

***********************