المبدع الجزائري | تجمع لأفضل القوالب والملحقات المتنوعة

الاثنين، 30 مايو 2016

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


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

  • من لوحة التحكم >> قالب>> تحرير 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/AVvXsEhtyAeYCTfTdbfeMT_jEh4hTIOzQTjIpQY9ws42pRScuQlgJxYgsbEqdnP6BAHFqjwCsUnaU-qKpc5sgikrbiw-NPyyI0Zgs8pAbEy49dbmTW6G0XX4vq2W-zWvBFjjrRs2bRXhZTf9oFM/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/AVvXsEhtyAeYCTfTdbfeMT_jEh4hTIOzQTjIpQY9ws42pRScuQlgJxYgsbEqdnP6BAHFqjwCsUnaU-qKpc5sgikrbiw-NPyyI0Zgs8pAbEy49dbmTW6G0XX4vq2W-zWvBFjjrRs2bRXhZTf9oFM/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>

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

واخيرا احفض الاداة ومبروك عليك الاضافة
شارك على الفيس بوك
شارك على تويتر
شارك على + Google
شارك على ينكدين
اعمر سهيل

اعمرسهيل : الجزائر ,قع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..

مرسلة بواسطة في

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
3للتبليغ عن رابط لا يعمل او مشكل في الموقع من هنا الطلب
4لطلب خدمة التبادل الاعلاني المطور من هنا

الصفحة الرئيسية

عن المدونة

المبدع الجزائري | تجمع لافضل القوالب و الملحقات المتنوعة

كن عضوا من مدونتي

عن مدونة

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

تواصل الاجتماعي والمتابعة

alwan may
انضم لموقعنا

تابع جديد موقعنا

على مواقع التواصل الإجتماعي

ضع إعلانك هنــــــــــــــا

جميع الحقوق محفوطة © 2016 Privacy-Policy| سياسة الخصوصية إتفاقية الإستخدام
تصميم المبدع الجزائري