افضل وأخف كود slide show لعرض الصور والفيديو للمدونات عن طريق اضافة أداه

كود عرض الصور والفيديو سلايد شو slide show ،

هذا الكود الرائع والمميز حقيقة والذي يمتاز بخفته وسهولة تركيبه ،
حيث يتم تركيبه في المدونه عن طريق اضافة أداه ( تخطيط ----> اضافة اداه )
كما يمكنك عرض صور فقط او صور وفيديو او عرض مواضيع
وتستطيع التحكم في مكان الكود عن طريق سحب الأداه في المكان الذي تريده
كما يمكنك التحكم في طول وعرض الكود ، وزيادة عدد المواضيع المعروضه بتكرار الرابط
صورة الكود

الكود

/* JavaScript Image Slider By http://alnaje7oon.blogspot.com/ */

#mcis {
     display: none;
    }

#sliderFrame {
     position: relative;
     width: 468px;
     margin: 0 auto;
            border:3px solid #E1E0E2;
    }

#ribbon {
     width: 111px;
     height: 111px;
     position: absolute;
     top: -4px;
     right: -4px;
    }

#slider {
     width: 468px;
     height: 260px;
     background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh926OscoNuifRs9EbLQ2IlOa__7Caad4QGLMCJ5j3Ja5CakNQkr7IMQmO97WC2qV2hr9FLq5OeqnEl3_ZWVKAmVM6nrYvgj8J1WPvnTwqkJuAzM4JdjZlDeAseor1G24YAvZAHXaVhLw/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
     position: relative;
     margin: 0 auto;
     box-shadow: 0px 1px 5px 010007;
    }

#slider img {
     position: absolute;
     border: none;
     display: none;
    }

#slider a.imgLink {
     z-index: 2;
     display: none;
     position: absolute;
     top: 0px;
     right: 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;
     right: 0px;
     bottom: 0px;
     z-index: 3;
     overflow: hidden;
     font-size: 0;
    }

div.mc-caption-bg {
     background-color: #0066CC;
    }

div.mc-caption {
     font: bold 25px/21px traditional arabic ;
     color:  #0000;
     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: 250px;
     right: 190px;
     width: 150px;
     background: none;
     padding-right: 20px;
     position: relative;
     z-index: 5;
     cursor: pointer;
    }

div.navBulletsWrapper div {
     width: 11px;
     height: 11px;
     background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsN11XikVvwEI6vxMHYP19GPAuscpjaTQTh1hfr1sQR_rs8G-YFZQV0OH90Hf_4BKebXF0M4waQyYTwtF-XKTQcrE3njDJtnL2ICWDfWOtjBXeb1SnWZvIZfR6qlXK78eeQ0KXvMs-Q/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
     float: right;
     overflow: hidden;
     vertical-align: middle;
     cursor: pointer;
     margin-left: 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>

تعليقات

مسوق إنجاز15 يونيو 2013 في 10:13 ص
شكرا جزيلا عى هذا الكود الرائع ... إنه أكثر من ممتاز
ردحذف
الردود
ابو امجد الكلباني8 أبريل 2014 في 6:43 ص
الله يعطيهم العافيه
ردحذف
الردود
toufik daddi13 ديسمبر 2015 في 11:35 ص
thank
you
ردحذف
الردود
ANF Store26 يونيو 2016 في 6:36 م
الف شكررررررررررررررر
ردحذف
الردود

إضافة تعليق

إرسال تعليق

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

مدونة الكلباني

بحث هذه المدونة الإلكترونية