السلايد
شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا
يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح
ولافت للأنظار هناك عشرات الإضافات التي تستخدم نفس الخاصية ولكن إخترت لكم
هذه بالتحديد وهي من تصميمات dimpost لأنها تحتوي عدة مميزات أول شئ هي
خفيفة جداً وهو ما تفتقر اليه أغلب السلايد الأخرى ميزة أخرى وهي ان
تصميمها بسيط وليس مبالغ فيه ويميز هذه النسخة السرعة والتوافق مع غالبية
القوالب وبمكنك رؤية معاينة حية لها عبر الرابط التالي
طريقة التركيب
أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل
ثم ادخل الى تحرير القالب
ابحث عن الوسم]]></b:skin> و الصق فوقه الكود التالي
#sliderFrame {position:relative;width:700px;margin: 60px auto 40px;}
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYOsKnm8Req4skGQ3VWZUHqttXBY3CaK7V6jR4VEisGjkLVynS_5IdUQWk4YE4FkZsoJiliohdiSKOCykjI0dm28fx4745VLo6epaPhw0VLvmOgun1BoX1F_q1pFzS67qZ8S1Ibp_kEao/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_tRgvgqv6E2Dneyc4qeuE3l4y8mz8Faq-AtjGDLFOJL2TUq3HY4HyvJZ4b5B39GfjjAT2JK04Rop-gIayyeAJu90UIZ2dt1ScAXTGsNuHFqBzMp9CmR-KrLXXrr122PBCa9TUUC5DB2B/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
#slider a, .intro, a.intro {
color: rgba(0, 0, 0, 0.2);
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
تنسيق السلايدر شو
بالنسبة للرقم 700 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 306px هو إرتفاع السلايد يمكنك تعديله
لتغيير الخط و حجمه قم بتغيير كلمة Arial و الارقام التي بجانبها بالحجم و الخط الذي تريده
وأضف الكود التالي تحت هذا الكود <div id='main-wrapper'>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B0wTCJB4dkJ7Y3BZMkNWREd5MUk" type="text/javascript"></script>
<div style="display:none;" ><a href="http://www.mudwnp.blogspot.com"></a></div>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aplMam2Wcr75isRdP130-aaVnYcwZOcYEDHkuAIGvyfgicLLRxqiqjfXxl1m-JeVRwrk3GOnezlL1jldqya-k5XNDqs6bGSX6DOMOfIy4guO7eMxYkyxKWr6IgY9sJ-HaCjHPf7lkFJF/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAuA3EvBpERjP6vvbPtKzFs-oBYHKkg35iZ7tyaVY-Cn7BqhnRBeHoqKaYDaR625U_ChN4n43hNFADA7R8GvE0gtbdFbzs1Bc8cJmDkouptKWgmsROzpqo1soyZB7ov2A7H31RIBPRMYy9/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwtFFPK9JOpmW-vVmE9kE0etsGAXtcAx-nWcq36KGnY-1ijAnRsAiSF2h7F6I9p8j18RwJVOrBv9K9-XW2Wp9Q_m-aOv5MCb1OB_NkIGYk85SWo-be6-g08mSYclhzxgFhjaguMu3DEoD/s1600/lamborghini-car-wallpapers1.jpg" alt="اسم الموضوع" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWSqDfTU0sZGcaVrcqwjU-ITejikP4wK1z5CieVcHhR422r5JjQsA35XnPORZiisUzmYCCHyAfaIjMacqZ7xHQj4385tEXXxbpJBM33EWhZiot4-uFGU3zYatI03rB0VjTgONfSxK1EZ3/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssOxdMOTPLVs2RLvLaGXjvEc3SaLxa83LCZBa-zAjIz6f_qdeSrgpiMFwyclnc0btQyoL2hkYPo-k-A5PrF1d8-tbvcA7IlQLJvwDznioFjFD9QKk5bJuCBj9OpVHkMMi98q9tpeqZ0Y8/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/></a>
</div>
</div>
اعدادات السلايد شو
استبدل ما هو باللون الازرق برابط الصورة الذي تريده
استبدل ما هو باللون الاحمر باسم الموضوع او القسم الذي تريده
استبدل ما هو باللون الاصفر # برابط الموضوع او القسم الذي تريده
من يواجه مشكلة في تنسيق او تركيب السلايدر ضعها في التعليق
في امان الله
مدونة مدون محترف
اضافة سلايدر شو خفيف و انيق لمدونات بلوجر
4
/
5
بواسطة
مدون محترف
الاسم اللى في المربع التاني اللى ببحث عنه مش لاقيه
ردحذفاهلا اخي الكريم ابحث عن هذه في اكواد HTML فقط main-wrapper و اضف الكود تحتها
حذفو كل قالب تختلف اكواده لذلك يمكنك إضافة الكود في المكان الذي تريده و سوف يظهر السلايدر
بالتوفيق
السلام عليكم قمت بتركيب السلايدر ووقع معي مشكل مثال على مدونة تجربية
حذفhttp://splforces.blogspot.com
افدنا جزاك الله خيرا
وعليكم السلام
حذفأهلًا صديقي
صراحة هذا الموضوع قديم جدًا أيضًا لا ننصح بتركيب هذا السلايدر =s
جزاك الله خيرا اخي
ردحذفواجهتني مشكلة.. وهي عند زيادة قيم العرض تذهب ازرار التنقل الى جهة اليمين وتكون بعيدة عن الصندوق!.. فكيف اضبط مكانها؟
اهلا اخي الكريم
حذفممكن رابط المدونة و لم افهم قصدك ما علاقة الازرار بالسلايدر
هذا ما اقصده اخي.. انظر للصورة.. المستطيل الاحمر اقصى اليمين
ردحذفhttp://store1.up-00.com/2015-03/1427484472951.png
مفروض ان تكون هذه الازرار اسفل السلايدر
أزال المؤلف هذا التعليق.
حذفتم تجديد الكود جربه و ردلي خبر
حذفنفس الشيء اخي x=
حذفهل يمكن بسبب انني وضعت اخر كود ذكرته في الشرح في اداة html\java بدلا من تحرير html ؟
نعم اخي جربته ونفس المشكلة تظهر حتى اذا لم اغير اي قيمة
ردحذفهناك شيء نسيت ان اخبرك به.. اخر كود ذَكرتَه في الشرح لم اعرف كيف اضيفه.. لانني لم اجد هذا الكود < div id='main-wrapper'>
ولم اعرف كيف احدد مكانه الذي اريده في (تحرير القالب)
فقمت باضافته من تخطيط ثم htm/JavaScript
هل يمكن ان تكون المشكلة ظهرت بسبب ذلك؟
قد تكون المشكلة انك اضفتها في HTML من التخطيط
حذفو كود < div id='main-wrapper'> يختلف من قالب لأخر لذلك لو كنت تعرف اكواد قالب يمكنك اضافة اخر كود في اي مكان تريده و سوف يظهر السلايدر بالشكل الصحيح
شكرا اخي.. لكن مازالت المشكلة قائمة حتى بعد اضافة الاكواد من تحرير القالب
ردحذفاهلا اخي الكريم إذا المشكلة من حجم القالب عندك او قد يكون من حجم السلايدر
حذفبمعنى قد يكون حجم السلايدر غير متوافق مع القالب الخاص بك و لذلك حاول تغيير حجم السلايدر ليناسب القالب الخاص بك
و ان شاء الله تحل المشكلة
نجحت
ردحذفاستطعت تعديلها من اللعب في هذه القيم
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:170px; left:0px; /* Its position is relative to the #slider */
width:150px;
جزاك الله خيرا اخي الكريم
اهلا اخي الكريم
حذفمن الجيد انها نجحت معك و كما قلت لك هي من الابعاد و هذه القيم هي العرض ... إلخ
الحمدلله انها انحلت المشكلة
بالتوفيق =r
شكرا اخي الكريم.. لكن ظهرت معي مشكلة جديدة =c
ردحذفاضفت قائمة منسدلة.. فاصبح السلايدر شو يغطي الجزء الذي ينسدل من القائمة.. لديك حل؟
وعذرا على الازعاج
ركبت قائمة اخرى وحلت المشكلة.. اسف لازعاجك
ردحذفاهلا يا غالي
حذفبالعكس لا يوجد اي ازعاج و احنا بخدمتك بأي وقت
بالتوفيق
صديقي انا جربت كود السلايدر في قالب المدونة وفي اضافة html وكل مرة يظهر السلايدر في الصفحة الرئيسية وفوق مواضيع المدونة.
ردحذفكيف يمكن أن اجعل السلايدر يضهر فقط في الصفحة الرئيسية؟
اهلا بك اخي الكريم
حذفقم بإضافة هذا الكود في اول الكود من HTML
<b:if cond='data:blog.url == data:blog.homepageUrl'>
و هذا الكود في الاخير
</b:if>
ثم بنجاح, شكرا لك أخي بالتوفيق مدونتك رائعة
ردحذفشكرا لك اخي ومن الجيد انه نجح معك
حذفانت الرائع =r
أي مكان html أضيف الكود ? لم أفهم
حذفاهلا اخي يوسف HTML و هي الخطوة الثانية من تركيب السلايدر
حذففهذا الكود اسمه كود HTML
انا ما اعرف اربط موضوع جديد باحد الاقسام بالرغم من اني حاولت من ادات تحريرhtml ارجو المساعدة وشكرا
ردحذفصراحة لم افهم قصدك ممكن توضحلي اكتر
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفاهلا اخي يوسف
حذفنعتذر لمسح التعليق
و لكن تقريبا انه لم يعمل لأنك لم تقم بالتعديل على الرابط الخاص بالمدونة الثانية
لو طريقة التركيب خاطئة
لأن شريط الاخبار يعتمد على اضافة رابط موقعك في كود HTML و من خلال رابط مدونتك يتم عرض اخر الاخبار
شكرا أخي ولاكن لم أعرف مكان إضافة الرابط
حذفاضف الرابط بدل #
حذفأستسمح أخي والله لم أجده أي طريقة إستخراجه من فضلك
حذفلم أجد أي علامة (#) أي مساعدة
حذفيا غالي اقرأ الكود سوف تجد
حذفكلمة اسم الموضوع قبلها يوجد هذه العلامة
هههه الله يخليك ياغالي أنا أتكلم على مشكل شريط أخبار ممكن أرسل لك صورة لمكان الكود ?
حذفاهلا اخي يوسف اعذرني بس و الله ضعت بين التعليقات
حذفارسل صورة يا غالي
ولكن في اجدد موضوع في المدونة يعني اذهب للصفحة الرئيسية و ادخل اول موضوع و هو الجديد فهناك افضل من هنا
هل ممكن جعل هذا سلايد يظهر في الرئسة فقط
ردحذفنعم اخي تستطيع اضف الكود التالي فوق اكواد السلايدر
حذف<b:if cond='data:blog.url != data:blog.homepageUrl'>
و اضف الكود التالي اسفل اكواد السلايدر
</b:if>
جرب و ردلي خبر
لم أفهم في أي مكان بضبط
حذففي الخطوة الثانية انت تقوم بوضع الكود
حذففوق اول سطر من الكود الذي بالخطوة الثانية
اضف ما قلته لك في التعليق السابق
و في نهايته ايضا اضف ما قلته لك في التعليق السابق
تم بنجاح حل مشكل السلايدر (y)
حذفماشي يا غالي
حذفبالتوفيق
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفاهلا اخي الكريم يوسف
حذفبالنسبة لمدونتك يمكنك إلغاء السلايد الخاص بك
و تركيب سلايدر التوأم
ابحث عنه في جوجل فهو سوف يتناسب مع مدونتك و لكن تركيبه يكون اسفل القائمة
=f شكرا أخي
حذفألا يوجد سلايدر أكثر إحترافية من هذآ
حذفلا شكر على واجب اخي يوسف
حذفبلا يوجد الاف السلايدرات التي يمكنك وضعها في بلوجر
حذفو لكن تركيبها يكون صعب احيانا و قد لا تتماشى مع بعض القوالب و تحتاج خبرة لجعله مناسب لموقعك
ولكن لو تريد نصيحتي و تريد سلايدر احترافي
ابحث عن المواقع التي تقدم قوالب بلوجر اجنبية
و ادخل إلى القوالب التي في سلايدر و لو اعجبك احدها خذ اكواده و ركبها في مدونتك
فلن تجد شروحات سلايدر عربية و جيدة
واتمنى عند التعليق مرة اخرى يكون على اجدد موضوع في المدونة
وليست المواضيع القديمة يا غالي
بالتوفيق =r
أزلته ولاكن تخربطت المدونة
حذفقد تكون قمت بإزالة بعض الاكواد الخاصة ببعض الإضافات عند إزالتك السلايدر لذلك يجب عليك معرفة اكواده الصحيحة و إزالته بالشكل الصحيح
حذفو إذا كانت طريقة إزالته صحيحة و المدونة تخربطت هنا يجب عليك إعادة تنسيقها
و اتمنى التعليق على اول موضوع في المدونة و ليس المواضيع القديمة
رائع جدا سلايدشو جميل (y)
ردحذفمرورك الرائع يا غالي
حذفيسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r