اصنع بنفسك سلايد شو مدونتك وقُم بضبط كل شئ على ذوقك انت. slideshow, 9in1

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

معاينة

سوف تصنع انت السلايد شو الخاص بك من البداية وحتى النهاية وذلك عن طريق الصفحة التالية..
 (( هـــنــــا ))حيث أن هذه الصفحة تحتوي على برنامج يساعدك على انشاء السلايد شو كما تحب ولا تحتاج إلى شرح فكل خطوة مكتوبة باللغة العربية وشرحها بجوارها وهذه صورة توضيحية..

اضغط على الصورة لرؤيتها بحجم اكبر

بعد الإنتهاء من صناعة السلايد شو الخاص بك قُم بتركيبه كما لو كنت تركب اي اضافة لمدونتك عن طريق البند تخطيط في لوحة التحكم ثم إضافة آداة ثم اختيار HTML / Javascript. ومعنا 9 امثلة على الإضافات وهما كالتالي..

العرض الأول : عادي.
العرض التاني : عرض أقسام معينة من المدونة.
العرض الثالث : تفاصيل مع مصغرات.
العرض الرابع : مصغرات فقط.
العرض الخامس : عنواين فقط.
العرض السادس : عرض أكثر من قسم في إضافة واحدة متعددة.
العرض السابع : السلايد شو ذات التأثيرات.
العرض الثامن : إختفاء التفاصيل لأسفل عند التغيير إلى شريحة جديدة.
العرض التاسع : إختفاء التفاصيل جانبياً عند التغيير إلى شريحة جديدة

إذا لم تريد كل هذا  وتريد الأكواد جاهزة فإليك صورة لكل شكل و الكود الخاص بها

العرض الأول

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
.slider-rotator {
  width:250px;
  height:340px;
}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
     url:"http://minisoftwre.blogspot.com"
});
</script>

معاينة

العرض الثاني

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
.slider-rotator {
  width:250px;
  height:340px;
}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://minisoftwre.blogspot.com", // ضع رابط مدونتك
    labelName: "blogger" // ضع اسم قسم من مدونتك لعرض مشاركاته
});
</script>

معاينة

العرض الثالث

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://minisoftwre.blogspot.com/", // ضع رابط مدونتك
    thumbWidth: 200, // قياس عرض المصغرات 200 = 200×200
    squareThumb: false, // ضبط ابعاد الصور المصغرة ولكن تدرج 200×200
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // صورة إحتياطية إذا لم تضع صورة في مشاركة
    autoHeight: true // تحريك العنصر للأعلى
});
</script>

معاينة

العرض الرابع

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://minisoftwre.blogspot.com/", // ضع رابط مدونتك
    showDetail: false, // إخفاء التفاصيل العنوان والتفاصيل
    showNav: false // إخفاء القائمة التي تحتوي على ارقام المشاركات
});
</script>

معاينة

العرض الخامس

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
.slider-rotator {
  width:auto;
  height:46px;
  margin-left:50px;
  margin-right:50px;
}
.slider-rotator h4 {margin-top:0}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://minisoftwre.blogspot.com/", // ضع رابط مدونتك
    showThumb: false, // إخفاء المصغرات
    showNav: false, // إخفاء القائمة التي تحتوي على ارقام المشاركات
    summaryLength: 160 // عدد حروف الملخص
});
</script>

معاينة

العرض السادس

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
.slider-rotator-wrapper {
  width:630px;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:white;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin:0 5px;
}
.slider-rotator {
  padding:0 0;
  border:none;
  width:200px;
  height:320px;
}
.slider-rotator .slider-item {padding:0 0}
.slider-rotator-nav {
  overflow:hidden;
  margin-top:10px;
  padding:2px 0;
}
.slider-rotator-nav a {
  margin:0 0;
  display:inline-block;
  line-height:normal;
}
.clear {clear:both}
</style>

<div id="slider-rotator-wrapper" class="slider-rotator-wrapper">
    <div class="grid">
        <div id="slider-rotator-1" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-2" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-3" class="slider-rotator loading"></div>
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: 'http://minisoftwre.blogspot.com', // ضع رابط مدونتك
    labelName: "blogger", // ضع اسم قسم من مدونتك لعرض مشاركاته
    thumbWidth: 200, // قياس عرض المصغرات 200 = 200×200
    interval: 10000,
    containerId: "slider-rotator-1"
});
makeSlider({
    url: 'http://minisoftwre.blogspot.com', // ضع رابط مدونتك
    labelName: "CSS", // ضع اسم قسم من مدونتك لعرض مشاركاته
    thumbWidth: 200, // قياس عرض المصغرات 200 = 200×200
    interval: 10000,
    containerId: "slider-rotator-2"
});
makeSlider({
    url: 'http://minisoftwre.blogspot.com', // ضع رابط مدونتك
    labelName: "HTML", // ضع اسم قسم من مدونتك لعرض مشاركاته
    thumbWidth: 200, // قياس عرض المصغرات 200 = 200×200
    interval: 10000,
    containerId: "slider-rotator-3"
});
</script>

معاينة

العرض السابع

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
.slider-rotator {
  width:600px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 14px/1.4 Tahoma,Georgia,Serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px;
  padding:0 0;
}
.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: 'http://minisoftwre.blogspot.com', // ضع رابط مدونتك
    thumbWidth: 600 // عرض المصغرات بالبكسل
});
</script>

معاينة

العرض الثامن

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
/* تخصيص CSS... */
.slider-rotator {
width:600px;
height:240px;
padding:0 0;
background-color:white;
font:italic normal 12px/1.4 Georgia,Serif;
color:white;
border:1px solid black;
}
.slider-rotator .slider-item {
background-color:white;
height:240px;
padding:0 0;
}
.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://nama_blog.blogspot.com",
    thumbWidth: 600,
    onInit: function() {
        $('#' + this.containerId).find('.detail-wrapper').hide();
    },
    onHide: function() {
        $('#' + this.containerId).find('.detail-wrapper').slideUp();
    },
    onShow: function(index) {
        $('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
    }
});
</script>

معاينة

العرض التاسع

الكود

<link rel="stylesheet" type="text/css" href="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.css"/>
<style type="text/css">
.slider-rotator {
  width:600px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 12px/1.4 Georgia,Serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px;
  padding:0 0;
}
.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}
.slider-rotator .detail-wrapper {
  opacity:0.8;
  position:absolute;
  top:10px;
  right:auto;
  bottom:auto;
  left:0;
  width:300px;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:1em 1em;
  z-index:4;
}
</style>

<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://minisoftblog.googlecode.com/svn/blogger/slideshow/slideshow.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://nama_blog.blogspot.com",
    thumbWidth: 600,
    speed: 1000,
    interval: 7000,
    onInit: function() {
        $('#' + this.containerId).find('.detail-wrapper').css('left', -500);
    },
    onHide: function() {
        $('#' + this.containerId).find('.detail-wrapper').stop().animate({
            left: -500
        }, this.speed);
    },
    onShow: function(index) {
        $('#' + this.containerId).children().eq(index).find('.detail-wrapper').stop().animate({
            left: 0
        }, this.speed);
    }
});
</script>

معاينة