اسهل طريقه لاضافة سلايد شو احترافي لمدونات بلوجر


السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب ,  يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript  , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

اضافة سلايد شو لمدونات بلوجر

مثال حي للسلايدر شو

معاينة
 

كيفية اضافة هذه الاداه الى مدوناتكم

 انتقل إلى لوحة تحكم مدونتك
     HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر
   والآن الصق داخل المستطيل الكود التالي
<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
       
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff urlundefinedhttp://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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 undefinedif 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 urlundefinedhttp://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/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;}
/* --------- Others ------- */
#slider
    {
transform: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,0,0);
    }
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>


مايجب عليك تغييره
  • عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
  • رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
    # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو. 
    700px : لتغيير عرض السلايد شو .
    306px:لتغيير ارتفاع السلايدشو.

     وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو
    لعرض هذه الاداه قبل اضافتها الى مدونتك قم ينسخ الكود والصقه في محرر الاكواد لمدونة جلال البعداني من هنا
     اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق  وسيتم الرد عليه انشاء الله

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
Facebook
Google
Twitter
75
jalal albaadani
  • تعليقات بلوجر
  • تعليقات فيس بوك

75 التعليقات:

  1. غير معرف19/6/13 23:46

    :)) ;)) ;;) :D ;) :p :(( :) :( =(( =)) :-* :x b-(:-t8-}

    ردحذف
  2. مشكور جدا استاذ جلال على المجهود الكبير لك
    هل ممن اللمكن اعرف ازاى اضيف فواصل بين الموضواعات والادوات الجانبيه فى المدونه ذى ما هو عند حضرتك فى المدونة هنا
    ولك جزيل الشكر.

    ردحذف
  3. @mohamed quandile
    العفو اخي شكرا لمرورك
    بالنسبه للفواصل فهي تحتاج الى تغيير كامل في بنية القالب
    لذا يرجى وضع اربط مدونتك من اجل الاطلاع على بنية القالب الذي تستخدمه

    ردحذف
  4. غير معرف1/7/13 01:32

    السلام عليكم

    ماهو المقصود من ( 306px: استبدلها برابط الموضوع المراد عرضه بالسلايد شو.)

    ردحذف
  5. @غير معرف عفوا اخي تم التعديل
    والمقصود بها تغيير ارتفاع السلايد شو
    شكرا على الملاحظه وعلى اسلوبك الرحب

    ردحذف
  6. لم استطع اضافته للأسف

    ردحذف
    الردود
    1. @T.A.J Merouana
      اخي انت اضفت السلايدشو بطريقه صحيحه ولكنك لم تضعه في المكان المناسب والذي يكون عادة فوق رسائل المدونة الالكترونيه كما في الصوره التاليه
      الصوره من هنا


      لذا كل ماعليك هو سحب الاضافه الى فوق مربع رسائل المدونه الالكترونيه

      حذف
  7. الردود
    1. العفو اخي شكرا لمرورك

      حذف
  8. Brit ndir slider her fsef7a ra2issiya

    ردحذف
    الردود
    1. اخي المعذره منك ولكني لم افهم قصدك
      هل تقصد ضهور السلايد شو في الصفحه الرئيسيه فقط

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

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

    ردحذف
    الردود
    1. اخي للتحكم بتوقيت وسرعة الشرائح قم بتحميل ملف التحكم من هذا الرابط
      http://dimpost.googlecode.com/files/js-image-slider.js
      بعدها قم بفتحه باي برنامج محرر نصوص او برنامج المفكره
      وقم بالبحث عن هذه القيمه pauseTime: 2600
      وغيرها حسب رغبتك (كلما زادت القيمة كلما زاد بطأ عرض الشرائح)
      وبعدها قم برفع الملف على استضافه برابط مباشر
      واستبدله بهذا الرابط
      http://dimpost.googlecode.com/files/js-image-slider.js

      حذف
  11. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. اخي المشكله ليست في المارجن وانما في حجم السلايد شو
      لذلك قم بتعديله كالتالي
      قم بالبحث عن الكود التالي
      width:700px
      ستجده مكرر مرتين قم بتغيير قيمته الى 630 ليتناسق مع حجز البوست لمدونتك

      حذف
  12. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. اخي ممكن رابط مدونتك لكي يكون التوضيح اكثر دقه

      حذف
  13. اخى شكرا على السلايد دا بس انا كنت عايز اعرف ازاى اقدر اعدل فى لون الخط بحيث يبقى واضح لكل الناس لان اللون مش واضح اوى

    ردحذف
    الردود
    1. العفو اخي الكريم لتغيير لون الخط قم بالبحث عن الكود #EEE واستبدله بكود اللون الذي تريده

      حذف
  14. أزال المؤلف هذا التعليق.

    ردحذف
  15. شكرا لك أخي جلال جربت السلايد رائع لكن للأسف جاء تحت التدونات الجديدة هل هناك طريقة لوضعه فوق التدوينات
    مع العلم جربت من لوحة التحكم التخطيط لم تنجح وتقبل مروري

    ردحذف
    الردود
    1. اخي الكريم لادراج السلايد شو فوق التدوينات قم بالبحث عن كلمة
      رسائل المدونه
      وستجد اعلاها احد الاكود التالي
      <div id='main-wrapper'>
      او
      <div id='content'>
      او
      <div id="content"></div>
      او
      <div class='column-center-inner'>

      قم بلصق كود السلايد شو فوق احد الاكواد التي وجدتها

      حذف
  16. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. نعم اخي قم باضافة العلامه الشرطيه التاليه قبل الكود الخاص بالسلايد شو تماما

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      واضف الوسم التالي في نهاية كود السلايد شو
      </b:if>

      الان قم بالحفظ والمعاينه

      حذف
    2. شكرا يا غالي عملت نفس الشيئ أنا كمان

      حذف
  17. أزال المؤلف هذا التعليق.

    ردحذف
  18. السلام عليكم موضوع رائع شكرا لك
    لى استفسار السلايدر شو فى مدونتى محاذاته لليسار اوانا مدونتى عربية فيقطع جزء منه حتى مع تصغير العرض فكيف يمكن جعل محاذاته لليمين ؟؟؟

    ردحذف
    الردود
    1. اخي ضع رابط مدونتك للمعاينه

      حذف
    2. http://the-movies-gate.blogspot.com/
      كما اننى اريده ان يظهر فى الصفحة الرئيسية فقط وليس فى صفحات التدوينات كيف ؟؟؟
      وشكرا لسرعة ردك :)

      حذف
    3. اخي محمد الخلل ليس في اكواد السلايد شو
      وانما في الصوره التي وضع رابطها داخل السلايد شو وذلك لان حجمها اصغر من حجز السلايدر
      ويجب ان تكون بنفس مقاس الصوره التالي
      http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg

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

      حذف
    5. قم باضافة العلامه الشرطيه التاليه قبل الكود الخاص بالسلايد شو تماما

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      واضف الوسم التالي في نهاية كود السلايد شو
      </b:if>

      الان قم بالحفظ والمعاينه

      حذف
  19. السلام عليكم يا جلال يا أخي
    أتمنى أن تكون بصحة وعافية
    أريد أن أسالك سؤال واتمنى ان تجاوبني عليه اذا لم تكن مشغول
    كيف أجعل السلايد شو يتحدث بالأخبار أوتوماتيك كما هو الحال في مدونتي الاولى (أتمنى أن تتذكر)
    (Foot--Ball.com)
    وفي آخر تعليق لم ينجح معي وما زال يظهر في جميع الصفحات

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

      اما اذا اردت سلايدر شو تلقائي كالذي في مدونتك فيمكنك اضافته من هنا
      http://www.alb33dani.com/2013/06/slidershow-th3pf.html

      حذف
  20. حاولت لكن لم يعمل
    سأقوم بارسال القالب رجاء ان تضعه لي وهو باللغة الانجليزية
    http://www.gulfup.com/?0RD8Yg

    ردحذف
  21. الردود
    1. اخي ارجو المعذره على تاخير الرد
      اتفضل القالب تم اضافة السلايد شو
      http://www.gulfup.com/?WLs0I6

      ولكن عليك تغيير روابط الصور الذي في السلايد شو

      لذلك قم بالبحث عن الكود التالي
      <div id="sliderFrame">
      وستجد روابط الصور اسفله تماما

      حذف
    2. اسف لم تفهمني .. اعني بان تضيف سلايد المحترف لاني حاولت ولم ينجح

      حذف
    3. تم تعديل القالب حسب طلبك
      http://www.gulfup.com/?trpXfh

      كل ماعليك فعله هو البحث عن كلمة اضافات بلوجر واستبدالها باسم قسم من اقسام مدونتك

      حذف
  22. السلام عليكم أخي جلال
    مشكور على الموضوع الرائع
    لكن عندي مشكلة بسيطة

    لما أبغى أضع الرابط اللي ينقل الزوار إلى موضوع الصورة ما عم يظبط
    أرجو أن ألا أكون زعجتك

    ردحذف
    الردود

    1. استبدل علامة # المربع ا برابط الموضوع المراد عرضه بالسلايد شو.

      حذف
  23. شكراً لك
    بس سويت كده وما ظبط ;((

    ردحذف
  24. السلام عليكم
    يا اخي انا حملت هذا القالب templet-it9an 3color-by alb33dani.blogspot.com
    واريد طريقة اضافه الموضوعات في الإسلايدر شو الخاصه به
    و شكرااا

    ردحذف
    الردود
    1. من القالب قم بالبحث عن كلمة نصائح واستبدله باسم قسم من اقسام مدونتك

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

    ردحذف
    الردود
    1. اخي ضع رابط مدونتك للمعاينة ومعرفة اين يكمن الخطا

      حذف
  26. اخى العزيز معذرة قمت بجميع الخطوات ولم تفلح المحاوله
    أرجو الافادة

    ردحذف
  27. شكرا لك على الموضوع الرائع
    تم تركيب بنجاح الحمد الله
    لكن ضهرت معي مشكل بسيط
    انظر الصورة لفهم المشكل
    http://im36.gulfup.com/wXGVm.jpg
    ارجو الاجابة في اقرب وقت و شكرا

    ردحذف
  28. هل يجب تغيير الصورة كلما عملت مشاركة جديدة ؟

    ردحذف
    الردود
    1. حسب رغبتك ,, فهذا السلايد شو لايقوم بعرض المواضيع تلقائيا وانما يتم ادراج روابط الصور والمواضيع يدويا

      حذف
  29. chokraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaannnnnnnnn :) (f)

    ردحذف
  30. أخي مكن السكايبي تبعك أريد مساعده

    ردحذف
  31. شكرا لك اخى
    انا عندما وضعته جاء كبير قليلا وعندما اغير العرض من 700 الى اى رقم يتحرك المستطيل الى اليسار

    وايضا جربت طريقة عرضه فى الصفحة الرئيسية فقط مثلما قلت للاخ محمد سمير ولم تنجح ايضا؟

    http://libyansonline.blogspot.com/

    ردحذف
  32. اخي اريد السلايد شو تلقائي ارجو التعديل على قالبي اريد سلايسو تلقائي
    رابط القالب
    http://www.gulfup.com/?YfOoB5
    و ارجوا مسح هده السلايد شو الغير الكامل شاهد هده الصورة
    http://im46.gulfup.com/HZaIq3.png
    اريدك ان احدفه
    و ارجوا منك ان تضيف مثل هده في الصورة و ان تكون تلقائية
    http://im74.gulfup.com/HX81uB.png
    و هده ايضا خي سامحني على طلباتي الكثيرة ارجو اضافة هده ايضا تحت الكاتب
    http://im58.gulfup.com/rNOXIm.png
    و شكرا لك دائما في انتضارك........


    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
    2. اخي ممكن تستعجل ارجوك الله يعطيك الف شكر ارجوا الانتهاء بسرعة لكي لا انسى

      حذف
  33. سلايد شو رائعه وقمت بتركبيها بسهوله الحمد لله مافيش مشاكل ولكن لاتظهر الازرار السفلية للسلايد كما موضح فى المعاينة
    وهذه مدونتى بعد تركيب السلايد
    http://market4students.blogspot.com/

    ردحذف
  34. خي اريد السلايد شو تلقائي ارجو التعديل على قالبي اريد سلايسو تلقائي
    رابط القالب
    http://www.gulfup.com/?YfOoB5
    و ارجوا مسح هده السلايد شو الغير الكامل شاهد هده الصورة
    http://im46.gulfup.com/HZaIq3.png
    اريدك ان احدفه
    و ارجوا منك ان تضيف مثل هده في الصورة و ان تكون تلقائية
    http://im74.gulfup.com/HX81uB.png
    و هده ايضا خي سامحني على طلباتي الكثيرة ارجو اضافة هده ايضا تحت الكاتب
    http://im58.gulfup.com/rNOXIm.png
    و شكرا لك دائما في انتضارك........

    ردحذف
  35. ممكن اتواصل معك اخى الكريم عاوز استشيرك فى شيئ رابط مدونتى http://download-professionals.blogspot.com/

    ردحذف
  36. أخي هذا موقعي http://oussraty.blogspot.com
    أنا أريد سلايدر فقط فالصفحة الرئيسية وأريد طريقة إدخال سلايدر

    ردحذف
  37. أخي تم إنشاء سلايدر لكن أريده فقط ظهور فالصفحة الرئيسية كيف

    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
  38. السلام عليكم و رحمة الله و بركاته ..
    استعملت برنامج wowslider 2.8 في تركيب سلايدر و إخراجه كان على سطح المكتب بملفاته لكن لم استطع رفعه و ارفاقه إلى مدونة البلوجر ؟؟
    و شكرا

    ردحذف
  39. السلام عليكم اشكرك على جهدك ولكن عندي سؤال كيف اجعل السلايد شو تلقائيا يعرض آخر المشاركات ام يجب ان اعدلها بنفسي ؟

    ردحذف
  40. أزال المؤلف هذا التعليق.

    ردحذف
  41. كيف يمكن تغير صورة الكاتب

    ردحذف
    الردود
    1. اخي الكريم لم افهم قصدك ( لان هذه الاضاه خاصه بالسلايد شو وليس بكاتب المدونه)

      حذف

المتابعون

اخر التعليقات

اصدقاء المدونه على الفيسبوك