الرئيسية إضافات سلايدر شو all سلايدرشو احترافي للبلوجر 2016

السبت، 11 يونيو 2016

سلايدرشو احترافي للبلوجر 2016

✔ مجو

حصريا سلايدرشو احترافي للبلوجر 2016

images


السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو 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>
ملاحظة : قم بتغير ما يلي
الصورة
العنوان
الوصف
رابط الموضوع

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

مواضيع ذات الصلة

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً

الموضوع التالي
الموضوع السابق

الاشتراك في: تعليقات الرسالة (Atom)