01‏/11‏/2014

من طلبات الأعضاء المتكررة سلايدر المستعمل بالمدونة حاليا ، وكما وعدتكم .. بطرحه فسأقدمه لكم في هاته التدوينة الخاصة به ، من مميزات السلايدر خفيف شكل جميل يتوافق مع جميع القوالب بدون إستثناء ومن سلبياته أنه لا يشتغل على متصفح فيرفوكس ، طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 12 موضوع يعرض بالسلايدر تلقائيا .

* ملاحظة السلايدر لا يدعم متصفح الفيرفوكس
شرح طريقة التركيب
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها
<style>
/* Css Slider Posts */
#featured-wrap {position: relative;height: 175px;margin: 0 auto;border-radius: 4px;}
#featured {border: 0;outline: none;position: relative;width: 890px;height: 150px;overflow: hidden;top: 10px;margin: 0 auto;}
.datex {display: none;}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li {width: 150px;display: inline-block;float: left;height: 150px;background: #fff;}
.thumb-featured {width: 130px;height: 100px;margin: 5px auto;border: 1px solid #fff;}
.thumb-featured img {display: block;width: 134px;height: 94px;border: 1px solid #ddd;padding: 2px;cursor: url(http://4.bp.blogspot.com/-qkEpq30SGqY/VFDnmVq7KGI/AAAAAAAAGig/s9v1b9t3b-w/s1600/Untitled-2.png),pointer;-moz-transition: all .3s ease 0s;}
.title-featured {text-align: center;position: relative;margin: 0 4px;font: 10px Electrolize,ge_dinar_oneregular;}
.title-featured a {color: #555;}
.title-featured h4{overflow:hidden}
.arrow {position: absolute;display: block;width: 32px;height: 32px;top: 60px;text-indent: -9999px;}
.arrow.back {left: 13px;background: transparent url(http://4.bp.blogspot.com/-tazd_K28hNA/VC1JAH9aZhI/AAAAAAAAGNM/fqwW3eGxCDI/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(http://3.bp.blogspot.com/-pI5M9xJ7490/VC1JAZWY04I/AAAAAAAAGNQ/I4PxW6BCsTE/s1600/righthm.png)no-repeat;}
span.slideloading{text-indent:-9999px;margin:50px auto;font-family:Electrolize,ge_dinar_tworegular}
</style>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>جاري التحميل ...</span>
</div>
</div>
<script src='https://ar1web-com.googlecode.com/svn/Hm/slider-iHussam.js'/>
إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية :
1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأزرق فوقه
3. ابحث عن ]]></b:skin>
4. ضع الكود المحدد باللون الأحمر فوقه
* في هذه المرحة والأخيرة يوجد عدة أماكن لوضع الكود , ويكون إما فوق المواضيع أو تحت القائمة او في الفوتر على حسب ذوقك
5. ابحث عن content-wrapper أو عن main-wrapper أو footer-wrapper
6. ضع الكود المحدد باللون البرتقالي فوق احد الأكواد
إذا ظهرت الأسهم بشكل متقارب ففي الكود المحدد بالأحمر اسمين باللون الأخضر خاصيين بالأسهم left:13px -- right:10px عدل الرقم
من طلبات الأعضاء المتكررة سلايدر المستعمل بالمدونة حاليا ، وكما وعدتكم .. بطرحه فسأقدمه لكم في هاته التدوينة الخاصة به ، من مميزات السلايدر خفيف شكل جميل يتوافق مع جميع القوالب بدون إستثناء ومن سلبياته أنه لا يشتغل على متصفح فيرفوكس ، طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 12 موضوع يعرض بالسلايدر تلقائيا .

* ملاحظة السلايدر لا يدعم متصفح الفيرفوكس
شرح طريقة التركيب
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها
<style>
/* Css Slider Posts */
#featured-wrap {position: relative;height: 175px;margin: 0 auto;border-radius: 4px;}
#featured {border: 0;outline: none;position: relative;width: 890px;height: 150px;overflow: hidden;top: 10px;margin: 0 auto;}
.datex {display: none;}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li {width: 150px;display: inline-block;float: left;height: 150px;background: #fff;}
.thumb-featured {width: 130px;height: 100px;margin: 5px auto;border: 1px solid #fff;}
.thumb-featured img {display: block;width: 134px;height: 94px;border: 1px solid #ddd;padding: 2px;cursor: url(http://4.bp.blogspot.com/-qkEpq30SGqY/VFDnmVq7KGI/AAAAAAAAGig/s9v1b9t3b-w/s1600/Untitled-2.png),pointer;-moz-transition: all .3s ease 0s;}
.title-featured {text-align: center;position: relative;margin: 0 4px;font: 10px Electrolize,ge_dinar_oneregular;}
.title-featured a {color: #555;}
.title-featured h4{overflow:hidden}
.arrow {position: absolute;display: block;width: 32px;height: 32px;top: 60px;text-indent: -9999px;}
.arrow.back {left: 13px;background: transparent url(http://4.bp.blogspot.com/-tazd_K28hNA/VC1JAH9aZhI/AAAAAAAAGNM/fqwW3eGxCDI/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(http://3.bp.blogspot.com/-pI5M9xJ7490/VC1JAZWY04I/AAAAAAAAGNQ/I4PxW6BCsTE/s1600/righthm.png)no-repeat;}
span.slideloading{text-indent:-9999px;margin:50px auto;font-family:Electrolize,ge_dinar_tworegular}
</style>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>جاري التحميل ...</span>
</div>
</div>
<script src='https://ar1web-com.googlecode.com/svn/Hm/slider-iHussam.js'/>
إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية :
1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأزرق فوقه
3. ابحث عن ]]></b:skin>
4. ضع الكود المحدد باللون الأحمر فوقه
* في هذه المرحة والأخيرة يوجد عدة أماكن لوضع الكود , ويكون إما فوق المواضيع أو تحت القائمة او في الفوتر على حسب ذوقك
5. ابحث عن content-wrapper أو عن main-wrapper أو footer-wrapper
6. ضع الكود المحدد باللون البرتقالي فوق احد الأكواد
إذا ظهرت الأسهم بشكل متقارب ففي الكود المحدد بالأحمر اسمين باللون الأخضر خاصيين بالأسهم left:13px -- right:10px عدل الرقم
39 Blogger تعليقات
Disqus
39 التعليقات
المشرف
avatar

شكراً اخي حسام لتلبيتك هذا الطلب

المشرف
avatar

العفو اخي .. بصحتك . :)

المشرف
avatar

أخي السلايدر يعمل لكن لا ارى اي موضوع فيه

المشرف
avatar

كيف !!! رابط مدونتك

المشرف
avatar

شكرا على تلبية الطلب تم التركيب بنجاح
سؤال هل يمكن تغيير الأسهم ؟

المشرف
avatar

سلايدر رائع من مدة وأنا بإنتظاره شكرا لك كثيرا اخ حسام وللمدونة أيضا =)D

المشرف
avatar

نعم يمكنك ستجد ايقونات الأسهم بداخل الكود المحدد باللون الأحمر

المشرف
avatar

:) اهلا بمرورك

المشرف
avatar

أخي حتى انت عندك السلايدر شغال لكن المواضيع التي في لا نراها

المشرف
avatar

إذا كنت تستعمل متصفح فيرفوكس فلن يشتغل سبق وذكرتها في الموضوع

المشرف
avatar

اخي الكريم كيف اتحكم بعدد المواضيع اللتي تظهر

المشرف
avatar

التحكم عن طريق كود جيكويري مخفي .. لذا لن يسعك التعديل عليه

المشرف
avatar

وهل يمكنك توضيح حل لمشكلة التدوينات الفارغة او empty cloned وحل مشكلة التدوينات بلا صور مع ان بداخل التدوينة هنالك صورة ( ملاحظة : انا اتكلم فقط عن السلايد وليس عن المدونة كلها )

المشرف
avatar

!! على الصورة في التدوينة أن تكون هي الأولى .. السلايدر لن يظهر المواضيع في متصفح فيرفوكس

المشرف
avatar

شكرا على السلايدر شو
ولاكن كيف يمكن تغيير لون الخلفية

المشرف
avatar

داخل الكود المحدد بالأحمر ابحث عن #featured li ستجد background

المشرف
avatar
المشرف
avatar

جميل اخي تسلم ايدك كانت اريد التواصل معك اخي عمال ابعتلك رسايل من اتصل بنا ولا انتا هنا مش بترد ده اميلي الفيس بوك رجاء مرسلتي https://www.facebook.com/profile.php?id=100007099755996

المشرف
avatar
المشرف
avatar

رائع يا ابن بلدي

المشرف
avatar

مرورك اروع

المشرف
avatar

انا ابحث عن content-wrapper أو عن main-wrapper أو footer-wrapper لا اجدهم في القالب

المشرف
avatar

قد يكونو بتسميات مختلفة رابط المدونة

المشرف
avatar

ممكن متابعت مدونتي من هناا
http://ar1-pro.blogspot.com/
:-bd
وشكرا

المشرف
avatar

مدونة ولا اروع

المشرف
avatar

كثر سلايدرات اخوي شكرا لك

المشرف
avatar

اخي هل يمكن جعلها تظهر مواضيع تسمية معينة ؟

المشرف
avatar

السلام عليكم أخي السلايدر يعمل معي لكنه لا يتجاوب مع الهاتف

المشرف
avatar

لأنه غير متجاوب اخي

المشرف
avatar
المشرف
avatar

العفو اخي

المشرف
avatar

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

المشرف
avatar
المشرف
avatar

شكرا لك أخي لكن الكود ليس كالمثال المشار له.

http://i03.imgup.net/Untitled2a46b.png

المشرف
avatar

بل هو نفسه أخي كما في المعاينة, يجب أن تكون لديك مواضيع كافية ليقرأها

المشرف
avatar

اخي اسم التدوينات في السلايدر عندي لا تضهر جيدا

المشرف
avatar

ممكن معاينة لو سمحت؟

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة