اعلان

صفحة خطأ ):
الصفحة التي تبحث/ي عنها غير موجودة

يمكنك محاولة كتابة كلمة البحث مضبوطه أو الضغط على الزر التالي للعودة للرئيسية

الرئيسية

6‏/4‏/2013

سلايدر جديد لى مدونة بلوجر2013 وسهل التنسيق




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

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

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار هناك عشرات الإضافات التي تستخدم نفس الخاصية ولكن إخترت لكم هذه بالتحديد وهي من تصميمات  menucool.com لأنها تحتوي عدة مميزات أول شئ هي خفيفة جداً وهو ما تفتقر اليه أغلب السلايد الأخرى ميزة أخرى وهي ان تصميمها بسيط وليس مبالغ فيه فلا تسبب شذوذ عن الإطار العام لمدونتك أيضا هي سهلة التنسيق وستتوائم مع مدونتك ومظهرها بسهولة بإذن الله أيضا هي سهلة التركيب فالكود الخاص بها ستضيفة الى آداة HTML/JavaScript ثم إسحب الآداة فوق صندوق المواضيع ولا شئ آخر وهو من النادر إيجاده في كثير من السلايد أيضا بها ميزة أخرى وهي عدم الخروج عن الإطار الأساسي كثير من الإضافات الخاصة بالسلايد عند بداية التحميل نجد الصور ظاهرة بشكل عمودي ومشوه ثم بعد إكتمال التحميل تبدأ بالظهور بالشكل العادي أما هذه الإضافة لا توجد بها تلك المشكلة فهي ستظل بشكل متناسب حتى قبل التحميل أيضا بعض السلايد يعطيك عدد محدد من الروابط لا تستطيع تجاوزه اما هذه فالعدد مناسب وانت من يتحكم به ربما الشئ الوحيد الذي ينقص هذه الإضافة هو أن الصور يجب ان تكون بالحجم المناسب يصعب تعديل الحجم عبر الأكواد مع إني افضل ذلك حتى لا تكون الصور مشوهه ويمكنك معاينة شكل السلايدر عبر المثال التالي


مثل ما فى مدونتى





    <style type="text/css">


    #mcis {
     display: none;
    }

    #sliderFrame {
     position: relative;
     width: 600px;
     margin: 0 auto;
    border:5px solid #000;
    border-bottom:25px solid #000;
    background:#fff;
    border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
    margin-bottom:5px;
    }
    #slider img {
     position: absolute;
     border: none;
    display: none;
    }

    #slider {
     width: 600px;
     height: 218px;
     background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;
     position: relative;
     margin: 0 auto;
     box-shadow: 0px 1px 5px #999999;
    }

    #slider a.imgLink {
     z-index: 2;
     display: none;
     position: absolute;
     top: 0px;
     left: 0px;
     border: 0;
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
    }

    div.mc-caption-bg, div.mc-caption-bg2 {
     position: absolute;
     width: 100%;
     height: auto;
     padding: 0;
     left: 0px;
     bottom: 0px;
     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;
    }

    div.navBulletsWrapper {
     top:225px;
    background: none;
     position: relative;
     z-index: 5;
     cursor: pointer;
    }

    div.navBulletsWrapper div {
     width: 11px;
     height: 11px;
     background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;
     float: left;
     overflow: hidden;
     vertical-align: middle;
     cursor: pointer;
     margin-right: 11px;
     _position: relative;
    }



    div.navBulletsWrapper div.active {
     background-position: 0 -11px;
    }

    #slider {
     transform: translate3d(0,0,0);
     -ms-transform: translate3d(0,0,0);
     -moz-transform: translate3d(0,0,0);
     -o-transform: translate3d(0,0,0);
     -webkit-transform: translate3d(0,0,0);
    }
     </style>

    <script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

    <div id="sliderFrame">
                    <div id="slider">
    <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
    <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
    </div></div>


طريقة تنسيق السلايد


بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218




هناك 3 تعليقات:

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

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

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

      حذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

جميع الحقوق محفوظة لــ بلوجر توب ©