[شرح] تركيب سلايد شو بلوجر تلقائي بشكـل احترافى Slideshow

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

http://2.bp.blogspot.com/-_5SAn-x2lxg/VEoFkIY8gnI/AAAAAAAAcVw/0hwKn_yyxwA/s1600/%D8%B3%D9%84%D8%A7%D9%8A%D8%AF%2B%D8%B4%D9%88.png

الان نشرح طريقة اضافة سلايد شو (slideshow ) لمدونة بوجر

اولا طريقة تركيب السلايد شو
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(&#39;data:image/gif;base64,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&#39;);
  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:&quot; - &quot;}
 دلوقتى بعد مضفت الكود دوس على حفظ ثم اذهب الى التخطيط فى المدونة الخاصة بيك ثم اضافة اداة Html/javascript من الاعلى مكان السلايد شو
http://1.bp.blogspot.com/-ddGs7hPHQQo/UoY33HiPXfI/AAAAAAAAAAA/gb-e5s-RgJo/s400/add-gadget-for-slider.png


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