More

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

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

سنبدأ أولا مع النسخة العادية وهي مشتقة من هذا السلايدر




تركيبها سهل أضف الكود التالي في آداة 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://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/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://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/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>

READ  Review: Marvel Ultimate Alliance Double Pack – PS4

التنسيق

الرقم  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://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/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;}

READ  التطبيق الرائع لتغير شكل الساعة وتذكير التواريخ الهامة لأجهزة الاندرويد Android My Alarm Clock v2.2 تحميل مباشر وعلى اكثر من سيرفر

التنسيق

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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline