سلايدر كن مدون التلقائي بتنسيقك الخاص

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

معاينــة

طريقة التركيب

أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل

ثم ادخل الى تحرير القالب

وأضف الكود التالي تحت هذا الكود

السلايد معد ليظهر في الصفحة الرئيسية فقط بحيث لا يسبب ثقل في التصفح للزائر لكن إن أردته ان يظهر في كل الصفحات قم بإزالة الكودين المحددين باللون الأحمر أو راجع هذا الموضوع لتحكم أكثر في مكان إظهار وإخفاء السلايدر من هنـــا

ويمكنك حذف الجزء الأخضر من الكود السابق لياتي السلايدر بآخر المواضيع من المدونة كاملة

الرقم 200 هو عدد حروف الملخص
الرقم 18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة او النقصان بحسب عرض مدونتك
القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه
ملاحظة :  " قد يرغب احد أن يصنع قسم او تسمية جديدة للسلايد بحيث يضع به مواضيع مختلفة من الأقسام ولا يريده ان يكون ظاهر للزائر بشكل كبير يمكن عمل التالي بإستبدال القسم برمز مثلا وليكن النجمة * ثم وضع المواضيع التي ترغب في تسمية جديدة وأيضا أعطها رمز النجمة ويمكن إخفائها من آداة التسميات بالطريقة التالية "

إتمام التركيب مع شرح التنسيق

 الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر

قم بإضافته فوق الوسم ]]>

#featured{
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 124px;
}
.sliderwrapper .contentdiv{
background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);
border:3px solid #7C7B7B;
height:180px;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;
margin-top: 10px;
opacity: 1;
padding: 15px 15px 15px 0;
position: absolute;
visibility: hidden;
width: 623px;
}

.pagination{
text-align: right;
margin-top: 110px;
padding:5px;
margin-left:5px;
}
.pagination a{
background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF);
font:13px Arial;
font-weight:bold;
color:#a3a3a3;
padding:4px 8px;
border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;
box-shadow: 0 1px 2px #000;-moz-box-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 1px 2px #000;
margin-right:4px;
}
.pagination a.selected{
color:#fff;
background:#000;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:380px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
}
.pagination .prev, .pagination .next{float:right;}
.featuredPost a{
color:#000;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#C94545;}
.featuredPost p{font-size:13px; margin:4px 0 0 0; color:#797979;}
.sliderPostPhoto a img{float: right !important;width:220px; height:180px;border:2px solid #000;}
.sliderPostPhoto{float: right !important; width:100px !important;}

لتعديل عرض السلايدر قم بتعديل الأكواد الحمراء بنفس النسبة إذا قمت بزيادة 10px يجب أن تزيدها جميعا بنفس النسبة ونفس الشئ إن أنقصت العرض
أما لتعديل الإرتفاع تعدل النسب الزرقاء بنفس الطريقة مع مراعاة أن الرقمين المتجاورين 220 و 180 هما عرض وإرتفاع الصورة
هذا اللون  #7C7B7B هو لون الإطار الخارجي للسلايدر

وهذا التدرج اللوني هو خلفية السلايدر

background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);

وهذا التدرج هو لون الأزرار

background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF);

وهذا لون background:#000; الزر الخاص بالموضوع المختار في السلايدر
هذه هي أهم الأكواد التي ستتيح لك التحكم في السلايدر وجعله مناسب لمدونتك ويمكنك الإستعانة بخدمة أكواد الألوان التابعة لنا 
وبالتوفيق بإذن الله

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.