14 أغسطس، 2014

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

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

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

السلايد شو أو السلايدر 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(http://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 (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(http://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;}
.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="http://1.bp.blogspot.com/-CnEvqjFGMzA/UwSL22ds1mI/AAAAAAAADQQ/WCqSKlyVaxI/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="http://2.bp.blogspot.com/-2KaJf5GkSQ4/UwSL3T_kuqI/AAAAAAAADQg/xsw-LRA8MLM/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="http://3.bp.blogspot.com/-TFYJJqgpQKg/UwSL4Worz4I/AAAAAAAADQs/EPd_1tCl3dU/s1600/lamborghini-car-wallpapers1.jpg"  alt="اسم الموضوع" /></a>

<a href="#"><img src="http://2.bp.blogspot.com/-up6G5dkx7dQ/UwSL248KmcI/AAAAAAAADQU/IB3_4inR1II/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="http://1.bp.blogspot.com/-1P9qlpDJpDA/UwSL4TZzbOI/AAAAAAAADQo/SkmHPxBN5jk/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/></a>
</div>
</div>


اعدادات السلايد شو


استبدل ما هو باللون الازرق برابط الصورة الذي تريده
استبدل ما هو باللون الاحمر باسم الموضوع او القسم الذي تريده
استبدل ما هو باللون الاصفر #  برابط الموضوع او القسم الذي تريده

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


في امان الله 
مدونة مدون محترف

مواضيع ذات صلة
اضافة سلايدر شو خفيف و انيق لمدونات بلوجر
4 / 5
بواسطة

هناك 52 تعليقًا :

  1. الاسم اللى في المربع التاني اللى ببحث عنه مش لاقيه

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

      و كل قالب تختلف اكواده لذلك يمكنك إضافة الكود في المكان الذي تريده و سوف يظهر السلايدر
      بالتوفيق

      حذف
    2. السلام عليكم قمت بتركيب السلايدر ووقع معي مشكل مثال على مدونة تجربية
      http://splforces.blogspot.com
      افدنا جزاك الله خيرا

      حذف
    3. وعليكم السلام
      أهلًا صديقي
      صراحة هذا الموضوع قديم جدًا أيضًا لا ننصح بتركيب هذا السلايدر =s

      حذف
  2. جزاك الله خيرا اخي

    واجهتني مشكلة.. وهي عند زيادة قيم العرض تذهب ازرار التنقل الى جهة اليمين وتكون بعيدة عن الصندوق!.. فكيف اضبط مكانها؟

    ردحذف
    الردود
    1. اهلا اخي الكريم

      ممكن رابط المدونة و لم افهم قصدك ما علاقة الازرار بالسلايدر

      حذف
  3. هذا ما اقصده اخي.. انظر للصورة.. المستطيل الاحمر اقصى اليمين

    http://store1.up-00.com/2015-03/1427484472951.png

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

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

      حذف
    2. تم تجديد الكود جربه و ردلي خبر

      حذف
    3. نفس الشيء اخي x=

      هل يمكن بسبب انني وضعت اخر كود ذكرته في الشرح في اداة html\java بدلا من تحرير html ؟

      حذف
  4. نعم اخي جربته ونفس المشكلة تظهر حتى اذا لم اغير اي قيمة

    هناك شيء نسيت ان اخبرك به.. اخر كود ذَكرتَه في الشرح لم اعرف كيف اضيفه.. لانني لم اجد هذا الكود < div id='main-wrapper'>
    ولم اعرف كيف احدد مكانه الذي اريده في (تحرير القالب)
    فقمت باضافته من تخطيط ثم htm/JavaScript

    هل يمكن ان تكون المشكلة ظهرت بسبب ذلك؟

    ردحذف
    الردود
    1. قد تكون المشكلة انك اضفتها في HTML من التخطيط
      و كود < div id='main-wrapper'> يختلف من قالب لأخر لذلك لو كنت تعرف اكواد قالب يمكنك اضافة اخر كود في اي مكان تريده و سوف يظهر السلايدر بالشكل الصحيح

      حذف
  5. شكرا اخي.. لكن مازالت المشكلة قائمة حتى بعد اضافة الاكواد من تحرير القالب

    ردحذف
    الردود
    1. اهلا اخي الكريم إذا المشكلة من حجم القالب عندك او قد يكون من حجم السلايدر

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

      حذف
  6. نجحت
    استطعت تعديلها من اللعب في هذه القيم

    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper {
    top:170px; left:0px; /* Its position is relative to the #slider */
    width:150px;

    جزاك الله خيرا اخي الكريم

    ردحذف
    الردود
    1. اهلا اخي الكريم

      من الجيد انها نجحت معك و كما قلت لك هي من الابعاد و هذه القيم هي العرض ... إلخ

      الحمدلله انها انحلت المشكلة

      بالتوفيق =r

      حذف
  7. شكرا اخي الكريم.. لكن ظهرت معي مشكلة جديدة =c

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

    وعذرا على الازعاج

    ردحذف
  8. ركبت قائمة اخرى وحلت المشكلة.. اسف لازعاجك

    ردحذف
    الردود
    1. اهلا يا غالي
      بالعكس لا يوجد اي ازعاج و احنا بخدمتك بأي وقت

      بالتوفيق

      حذف
  9. غير معرف24 أبريل, 2015

    صديقي انا جربت كود السلايدر في قالب المدونة وفي اضافة html وكل مرة يظهر السلايدر في الصفحة الرئيسية وفوق مواضيع المدونة.
    كيف يمكن أن اجعل السلايدر يضهر فقط في الصفحة الرئيسية؟

    ردحذف
    الردود
    1. اهلا بك اخي الكريم
      قم بإضافة هذا الكود في اول الكود من HTML

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

      و هذا الكود في الاخير

      </b:if>

      حذف
  10. غير معرف25 أبريل, 2015

    ثم بنجاح, شكرا لك أخي بالتوفيق مدونتك رائعة

    ردحذف
    الردود
    1. شكرا لك اخي ومن الجيد انه نجح معك
      انت الرائع =r

      حذف
    2. أي مكان html أضيف الكود ? لم أفهم

      حذف
    3. اهلا اخي يوسف HTML و هي الخطوة الثانية من تركيب السلايدر
      فهذا الكود اسمه كود HTML

      حذف
  11. انا ما اعرف اربط موضوع جديد باحد الاقسام بالرغم من اني حاولت من ادات تحريرhtml ارجو المساعدة وشكرا

    ردحذف
    الردود
    1. صراحة لم افهم قصدك ممكن توضحلي اكتر

      حذف
  12. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف
    2. شكرا أخي ولاكن لم أعرف مكان إضافة الرابط

      حذف
    3. اضف الرابط بدل #

      حذف
    4. أستسمح أخي والله لم أجده أي طريقة إستخراجه من فضلك

      حذف
    5. لم أجد أي علامة (#) أي مساعدة

      حذف
    6. يا غالي اقرأ الكود سوف تجد
      كلمة اسم الموضوع قبلها يوجد هذه العلامة

      حذف
    7. هههه الله يخليك ياغالي أنا أتكلم على مشكل شريط أخبار ممكن أرسل لك صورة لمكان الكود ?

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

      حذف
  13. هل ممكن جعل هذا سلايد يظهر في الرئسة فقط

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

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

      و اضف الكود التالي اسفل اكواد السلايدر

      </b:if>

      جرب و ردلي خبر

      حذف
    2. لم أفهم في أي مكان بضبط

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

      حذف
    4. تم بنجاح حل مشكل السلايدر (y)

      حذف
    5. ماشي يا غالي
      بالتوفيق

      حذف
  14. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اهلا اخي الكريم يوسف
      بالنسبة لمدونتك يمكنك إلغاء السلايد الخاص بك
      و تركيب سلايدر التوأم
      ابحث عنه في جوجل فهو سوف يتناسب مع مدونتك و لكن تركيبه يكون اسفل القائمة

      حذف
    2. ألا يوجد سلايدر أكثر إحترافية من هذآ

      حذف
    3. لا شكر على واجب اخي يوسف

      حذف
    4. بلا يوجد الاف السلايدرات التي يمكنك وضعها في بلوجر
      و لكن تركيبها يكون صعب احيانا و قد لا تتماشى مع بعض القوالب و تحتاج خبرة لجعله مناسب لموقعك
      ولكن لو تريد نصيحتي و تريد سلايدر احترافي
      ابحث عن المواقع التي تقدم قوالب بلوجر اجنبية
      و ادخل إلى القوالب التي في سلايدر و لو اعجبك احدها خذ اكواده و ركبها في مدونتك
      فلن تجد شروحات سلايدر عربية و جيدة
      واتمنى عند التعليق مرة اخرى يكون على اجدد موضوع في المدونة
      وليست المواضيع القديمة يا غالي
      بالتوفيق =r

      حذف
    5. أزلته ولاكن تخربطت المدونة

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

      حذف
  15. رائع جدا سلايدشو جميل (y)

    ردحذف
    الردود
    1. مرورك الرائع يا غالي

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r