الثلاثاء، 13 مايو 2014

|

اضافة سلايدشو تلقائي لعرض التدوينات على شكل شريط متحرك


السلام عليكم ورحمة الله وبركاته

اليوم وفي هذا الموضوع الحصري حبيت اقدم لكم اجمل سلايدر لعرض التدوينات تلقائياً على شكل شريط متحرك والسلايدر احترافي بكل معنا الكلمة فهو يضيف لمسة من الجمالية على قالب مدونتك ويعرض لك مواضيع مدونتك . الان نتطرق الى شرح تركيب السلايدر
♦ طريقة تركيب السلايدر 

 1- من  لوحة التحكم -> قالب -> تحرير HTML 
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
قم بالبحث عن الكود </head> واضف فوقه مباشراً الكود التالي

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>
 والان قم بالبحث عن الكود ]]></b:skin> واضف قبله مباشراً الكود التالي
#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}
#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}
#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:#222;border-left:1px solid #111;border-right:1px solid #333;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}
.title-featured{text-align:center;position:relative;margin-top:-20px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#fff url(https://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background-image:url(https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}
والان الخطوة الاخيرة مكان اضافة السلايدر في القالب
1- اذا اردت اضافة السلايدر تحت الهيدر ابحث عن الكود التالي <div id='main-wrapper'> واضف فوقه الكود التالي
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>
 2- اذا اردت اضافة السلايدر فوق الفوتير ابحث عن الكود التالي <div id='footer-wrapper'> واضف فوقه الكود الاخير

اضغط حفظ ومبروك عليك السلايدر الجميل والاحترافي

تنبيه :- نقل بدون ذكر مصدر ممنوع

دمتم في رعاية الله وحفظه
azez mohammed

اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها التصوير ، الرياضة ، والتصميم بحد ذاته ومدونة تعاون تعبر عما أهواه .

27 التعليقات

المسعودي أ.عابد 16 يونيو 2014 8:41 م

موضوع ممسز تم الاستفاده منه لك مني الشكر

AZEZ MOHAMMED 16 يونيو 2014 11:20 م

شكراً لك على المرور ويسعدنا ان تستفيد ولو بشي بسيط من مواضيع المدونة تحياتي لك ياغالي :)

Amir love 9 أكتوبر 2014 4:13 ص

تم تسلم يا حبيب قلبي وكتر الف خيراك (k)

AZEZ MOHAMMED 8 نوفمبر 2014 3:39 م

العفو اخي الكريم تحياتي لك

ameer mohamed 12 نوفمبر 2014 5:41 م

والله يا اخي اشكرك كثيرا بس ما اعرف ليه هل المشاكل الغريبه تظهرلي السلايد استغل تمام لكن لاتظهر صور المواضع يظهر العنوان تمام لكن تظهر الصور الدفولت اللي عليها استفهام مكان صورة الموضوع؟؟؟؟؟!!!

Sayed Saber 8 يناير 2015 6:57 ص

شكرااااااااااااااااااااااااااااااااااااااااااااااااااااا

AZEZ MOHAMMED 8 يناير 2015 3:02 م

العفو اخي الفاضل
سررت بتعليق تحياتي لك ^_^

Mohammed hamed 12 يناير 2015 12:19 م

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

Mohamed AMAZAL 17 يناير 2015 12:19 ص
أزال المؤلف هذا التعليق.
Mohamed AMAZAL 17 يناير 2015 12:22 ص
أزال المؤلف هذا التعليق.
Fast Load 2 فبراير 2015 1:02 م

مشكوووور

khadija morabit 23 فبراير 2015 12:26 ص

merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Hicham Afkir 14 مارس 2015 3:32 ص

kayfa a9om bidafa label lihada slider

حسين وافى العجرمى 20 مارس 2015 10:07 ص

شكرا اخى ولكن واجهتنى مشكله ...
http://store1.up-00.com/2015-03/1426835195751.png
ياريت لو عندك حل لها اخى الفاضل ..
رابط مدونتى :- http://el3grmy.blogspot.com/

aissa khobiezi 10 أبريل 2015 12:00 م

السلام عليكم اولا اشكرك على الاضافة الرائعة
بعدما ركبتها على موقعي ضهر الشريط ولكن لم تظهر المواضيع اجو افادتي بالطريقة
جزاك الله خيرا

aissa khobiezi 10 أبريل 2015 12:00 م

عفوا نسيت رابط المدونة الخاصة بي :
http://www.news-darchioukh.com/

اسامة محمد 24 أبريل 2015 4:17 ص

ما هو الخطأ فى المدونة التدوينات لا تظهر
http://shar2-llm3lomiat.blogspot.com/
فى السلايد شو

Sa Sami 2 مايو 2015 11:28 م

شكراً

samirqo emad 29 يونيو 2015 1:52 ص

http://koooora-online-tv.blogspot.com/

Progduzero.com 16 يوليو 2015 12:36 ص

شكراً
progduzero

zouhair zougua 30 أغسطس 2015 5:35 م

شكرا

صور مشبات حديثه رخام 23 أكتوبر 2015 10:17 ص


تركيب قرميد,

قرميد جديد,

اجمل عروض اعمال قرميد,

قرميد اجود انواع القرميد,

تركيب قرميد اسطح,


http://abjdhoaz900.blogspot.com/

rafika jebli 12 ديسمبر 2015 5:46 م

السلام عليكم أخي الكريم لقد قمت بعمل مدونة وقمت بتعديل قالب عليها غيرت كل شيئ بنجاح ما عدا 'السلايد شو" لم يتغير وطل سلايد شو القديم التابع للقالب المحمل وليس له صلة بمحتوى مدونتي الرجاء الرد سريعا وشكرا

rafika jebli 12 ديسمبر 2015 5:49 م
أزال المؤلف هذا التعليق.
أجي تستافد 19 يوليو 2016 5:41 م

صديقي كيفية تعديل على الطول والعرض

محمد السهبوني 11 سبتمبر 2016 3:53 م

كيف اضيف التسمية

من الرائع ان تشاركنا تجربتك ورأيك، من فضلك لا تستخدم اي كلمات خارجة، روابط لا علاقة لها بالموضوع لانه سيتم حذفها فوراً. فالتعليقات خاضعة للإشراف، دعنا نجعل التعليقات ساحة لتبادل الخبرات والنقاش , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.