اجمل سلايد شو لمدونات بلوجر

اضافة افضل سلايدشو تلقائي لعرض اخر المواضيع

 

 

السلام عليكم ورحمة الله وبركاته

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

طريقة تركيب السلايدشو

1- من  لوحة التحكم -> قالب -> تحرير HTML 

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

قم بالبحث عن الكود  ]]></b:skin> واضف قبله الكود التالي

 .s3slider {
  margin:0 auto 10px;
  border:2px solid white;
  background:white none no-repeat 50% 50%;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
}
.s3slider.loading {
  background-image:url('data:image/gif;base64,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');
  text-indent:-9999px;
}
.s3slider-content,
.s3slider-content li {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
.s3slider-content li {
  position:static;
  display:none;
}
.s3slider-content img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  border:none;
  outline:none;
  padding:0;
  margin:0;
}
.s3slider-caption {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:auto;
  font:normal normal 11px/normal GESSTwoMediumRegular;
  color:white;
  background-color:black;
  opacity:.8;
  filter:alpha(opacity=80);
  padding:7px 10px 10px;
  display:none;
}
.s3slider-title,
.s3slider-meta {display:block}
.s3slider-title a {
  font-size:110%;
  font-weight:bold;
  color:white;
  text-decoration:none;
}
.s3slider-title a:focus,
.s3slider-title a:hover {text-decoration:underline}
.s3slider-meta-comment:before {content:" - "} 

4- والان بعد ان قمت باضافة الكود اضغط على حفظ ثم نذهب الى التخطيط اضافة اداةHtml/javascript فوق رسالئل المدونة الالكترونية

واضف الكود التالي داخل الاداة

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="s3slider-container">
  <div class="s3slider loading" style="width:420px;height:270px;">
    Memuat...
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var s3slider_config = {
    url: 'http://bgdadiat.blogspot.com',
    numPost: 7,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    newTabLink: false,
    containerId: 's3slider-container',
    slider: {
        width: 420,
        height: 270,
        timeOut: 4000
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script> 
</b:if>

غير رابط المدونة http://bgdadiat.blogspot.com برابط مدونتك

numPost: عدد المواضيع التي تعرض في السلايدشو يمكنك تغيرها حسب رغبتك
width: تغير عرض السلايدشو حسب حجم مدونتك
height: تغير طول السلايدشو حسب رغبتك ايضاً