سلايدر تقني بنسختيه العادية والتلقائية

الفرق بين النسختين

الاولى العادية : وهي التي يمكنك اختيار الصور والروابط فيها بشكل يدوي

وهذا يجعلك تتحكم بخصائصها بشكل أكبر

الثانية تلقائية : تأتي بالمواضيع تلقائياً من المدونة من القسم الذي تريده

لكن هذه تحتاج ان تكون مواضيع مدونتك الصور بها بحجم كبير وواضحه حتى تظهر بشكل جيد ولا تبدو مشوهه

•  أولا مع النسخة العادية 

تركيبها سهل أضف الكود التالي في آداة HTML/JavaScript

<style>
#mcis { display: none;}
#sliderFrame {
  background:#222;
  margin: 2px auto 20px;
  padding: 20px 20px 28px;
  position: relative;
  width: 620px;
}
#slider img {
 position: absolute;
 border: none;
display: none;
}
#slider {
 width: 620px;
 height: 350px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYA88uEEAKsBF80oFG6N9AzWcQ5KQzhJAkXiV2h1a9pK16BTRKstZAUSnRhG1X8T9zexaQ8FUO8I4z3CsJZlGgSoOE7enQRx2o1kjk12U564B5j7JTM7zyaM6POLbae_usi0F1d7wQZ6sV/s32/preview.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {background-color: black;}
div.mc-caption {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQm1oq0cs3rAk4ZtIV1HrLlQPU2lQGt9eYLiXDAB_HbRRhZtLlDBSr9CvnelqZDjz_jIaYIOLY_EJBYCWODL18nRZpldTDkwe3v3PwSdbwcMizKiVRXxNXAtxz8jIM8axiYVcjiEJ4x2M/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #EEEEEE;
  font: bold 15px/30px tahoma;
  padding: 10px 0;
  text-align: center;
  z-index: 4;
}
div.mc-caption a { color: #FB0;}
div.mc-caption a:hover { color: #DA0;}
div.navBulletsWrapper {
 top:350px;
background: none;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div{
background:#ccc;
cursor: pointer;
float: right;
height: 9px;
margin-left: 1px;
overflow: hidden;
vertical-align: middle;
width: 87px;
}
div.navBulletsWrapper div.active { background:#1980E6;}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
</style>
<script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
</div></div>

التنسيق

الرقم  620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا #1980E6 هو لون السلايدر النشط

الإستخدام

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

• ثانياً النسخة التلقائية 

لتركيبه نفذ نفس خطواط التركيب الموجوده في الموضوع الأصلي ما عدا الخطوة الأخيرة وهي كود التنسيق الذي يضاف فوق الوسم ]]></b:skin>

استبدله بالكود التالي

body#layout #featured {display: none;}
#featured {
  background:#222;
  height: 350px;
  padding: 20px 20px 28px;
  width: 620px;
}
.sliderwrapper .contentdiv{position: absolute;visibility: hidden;}
.sliderPostPhoto img {
  float: right;
  height: 350px;
  margin: 0;
  width: 620px;
}
.featuredPost {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQm1oq0cs3rAk4ZtIV1HrLlQPU2lQGt9eYLiXDAB_HbRRhZtLlDBSr9CvnelqZDjz_jIaYIOLY_EJBYCWODL18nRZpldTDkwe3v3PwSdbwcMizKiVRXxNXAtxz8jIM8axiYVcjiEJ4x2M/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #e2e2e2;
  float: right;
  height: 130px;
  margin-top: 219px;
  overflow: hidden;
  padding: 0 10px;
  position: absolute;
  width: 600px;
}
.featuredPost h2 { margin: 0 0 5px;  padding: 0;}
.featuredPost a {
  color: #fff;
  font: bold 18px tahoma;
  text-decoration: none;
}
.featuredPost a:hover {color:#bbb;}
.featuredPost span { font: 15px serif;}
.prev, .next {display: none;}
.featuredPost p {
  font: 15px/1.4em tahoma;
  margin: 5px 0 0;
}
.pagination {
  margin-top: 350px;
  position: absolute;
  z-index: 99;
}
.pagination .toc {
  background:#ccc;
  display: block;
  float: right;
  font-size: 0;
  height: 9px;
  margin-left: 1px;
  width: 87px;
}
.pagination .toc.selected { background:#1980e6;}

التنسيق

هناك ثلاث أرقام باللون الأحمر هي عرض السلايدر يجب ان تزيدهم بنفس القدر ان غيرت العرض يعني ان زدت واحد 10 تزيد البقية مثله
هناك أربع أرقام باللون الازرق هي ارتفاع السلايدر ايضاً تزيدها بنفس القدر
الرقم 87 عندما تركب المراحل في الموضوع الاصلي ستجعل عدد المواضيع 7 لكي يكون السلايدر مضبوط لكن لو اردت الزيادة
قم بتقليل الرقم 87 بحيث تظهر ازرار التنقل بشكل مناسب وتستوعب مكان المواضيع الزائدة دون تشوه
اما لو اردت مواضيع أقل من 7 فزد الرقم 87 بحيث تتسع المساحة الخاصة بالأزرار ولا يوجد فراغ
وهذا #1980e6 هو لون السلايد النشط