القائمة الرئيسية

الصفحات

سلايدر جديد لى مدونة بلوجر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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHPJmHQHOZBRq32P9iydplTjWgW9MyjrINGxGvzFdrL5s3hoq9xnKEW_K608GUp2AeOXIoRiKXCpqM6bwMyzmlLsCysJfPGN_rFwajWyurl-r9wVbdwIu7hwoW4J7KmFyXznb33mUIbo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6GJo3I0LBvo8jXYwJP-mlYOaBr7iDWvR3fU4wHe9QLLonaIxAw4tYVbBPi5mdb45vGZMvenaXISwkHA0O8yNjnKX0rysftNmWqPJv9uM5nkNijp337Y9jDKBwugf4aEPncv6U9zEeXQ/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




Commentaires

3 commentaires
Enregistrer un commentaire
  1. Ce commentaire a été supprimé par un administrateur du blog.

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

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

      Supprimer

Enregistrer un commentaire

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

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

التنقل السريع
    -->