ماهو سبب تقرحات الفم

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

كيفية اضافة هذه الاداه الى مدوناتكم

من لوحة التحكم >> قالب>> تحرير 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-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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"> <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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"> <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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"> <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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"> <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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"><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">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>

 <a href="#"> <button>اقرا المزيد</button>

    </div>

  </div>

ملاحظة : قم بتغير ما يلي
الصورة
العنوان
الوصف
رابط الموضوع

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