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

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

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

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

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://amazighweeb.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://amazighweeb.blogspot.com برابط مدونتك
numPost: عدد المواضيع التي تعرض في السلايدشو يمكنك تغيرها حسب رغبتك
width: تغير عرض السلايدشو حسب حجم مدونتك
height: تغير طول السلايدشو حسب رغبتك ايضاً

لاتقرأ وترحل ضع بصمتك معنا من خلال ترك تعليق

اي استفسار حول الموضوع ضعه في تعليق

دمتم برعاية الله وحفظه

عنوان التدوينة: اضافة احلى سلايدشو تلقائي لعرض اخر المواضيع
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / مدير AmazighWEB | اامازيغ ويب | كريم أمكين

عدد المشاهدات :

• غرد
• مشاركة
• إضافة
مزيد

بضغطة زر تشارك الفائدة وتدعم المدونة

صندوق التدوينة

رابط مباشر :

كود للمنتديات :

HTML كود :